on('click'....) 仅在第二次点击后触发

Question

这是脚本。 当我在加载时单击它时，就像一个魅力。 当我通过动态创建的元素单击它时，第一次单击会看到实际的 html 偏移（有点拉伸和 go 返回）。 然而，它确实在第二次点击时始终如一。

<script>
$(document).on('click', '.iframe_add', function(){        
    var element = $(this).attr('name');
    $('#iframe_target').html('<iframe src="https://104.131.18.58/t3/default/ajax_new_secured_asset_debt_creator?all='+element +'" frameborder="0" width="580" height="300" scrolling="yes" id="myFrame"></iframe>');
});    
</script>

我真的不明白发生了什么，我很感激任何帮助。

PS 我看到了这个，但不确定它是否适用（似乎处理一些日期选择器问题） jquery on.click 在第一次点击时不起作用（使用动态元素）

编辑：

这是HTML

<div id="iframe_modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
        <h4 class="modal-title">Edit Information</h4>
      </div>
      <div id="iframe_target" class="modal-body">
      </div>
    </div>
  </div>
</div>

编辑 2 - 控制台日志（都一样）：

<a href="#iframe_modal" name="14-1136--Debts_secured-asset_page" class="iframe_add" data-toggle="modal">New</a>

Answer 1

您的控制台日志：

<a href="#iframe_modal" name="14---asset-asset_page" class="iframe_input btn btn btn-primary" data-toggle="modal">New</a>

揭示了其中一个类是iframe_input 。

您的JavaScript告诉我们，当您单击名为.iframe_add的类的元素时，希望触发click事件。

尝试

$(document).on('click', '.iframe_input', function(){

Answer 2

好。 因此，这是我想出的hack-hack解决方案（如果您无法击败em，并且通过em，我是指javascript，请加入em）：

parent.document.getElementsByClassName("iframe_input")[0].click();

当模态隐藏时，我只是强行单击第一个输入元素，这似乎可以解决问题。 话虽这么说，这似乎真的很不客气，我全都知道为什么这是错误的，但它确实起到了作用。

Answer 3

您必须检查是否没有收到错误 -> 无法读取 null 的属性“addEventListener” 如果是，您必须添加代码 document.getElementById('xxx_element_name_xxx').addEventListener('click', xxx_function_name_xxx, true); 在声明元素 xxx_element_name_xxx 的位置之后。

Answer 4

在我的 ASP.Net Web 表单中遇到了同样的问题。 我的情况是我创建了切换按钮来隐藏和显示 div。

我通过在加载页面期间嵌入初始样式来解决这个问题：在 div 本身没有显示，而不是将它放在外部 css 文件中。

<div id="toggleDiv" style="style:none">
</div>