Question

我有一个看起来像这样的点击事件。

    $( ".open_report" ).on( "click",function() {
        console.log("on click");
        //Do Stuff
    });

它会触发已创建的项目，但不会触发新的（动态）创建的项目。

除了id s不同（它应该）并且data-report标记数据不同，它们是相同的代码。所以我无法弄清楚为什么我的点击事件不会触发动态添加的项目。

已加载项目

<tr id="18109599-1516219070.html" data-report="18109599-1516219070.html" class="select data-row even">
  <td style="width: 300px;" data-report="18109599-1516219070.html" class="listing_cell open_report">
    <div class="plCell_desktop">
      <label>Discharge Summary</label>
    </div>
  </td>
  <td style="width: 125px;" data-report="18109599-1516219070.html" class="listing_cell open_report">
    <div class="plCell_desktop">
      <label>17-01-2018,19:57</label>
    </div>
  </td>
  <td style="width: 30px;" class="listing_cell">
    <div class="">
      <input data-report="18109599-1516219070.html" type="button" class="removeButton buttons delete_report" value="x">
    </div>
  </td>
</tr>

动态添加商品

<tr id="18109599-1516219273.html" data-report="18109599-1516219273.html" class="select data-row">
  <td style="width: 300px;" data-report="18109599-1516219273.html" class="listing_cell open_report">
    <div class="plCell_desktop">
      <label>Discharge Summary</label>
    </div>
  </td>
  <td style="width: 125px;" data-report="18109599-1516219273.html" class="listing_cell open_report">
    <div class="plCell_desktop">
      <label>17-01-2018,20:01</label>
    </div>
  </td>
  <td style="width: 30px;" class="listing_cell">
    <div class="">
      <input type="button" data-report="18109599-1516219273.html" class="removeButton buttons delete_report" value="x">
    </div>
  </td>
</tr>

Answer 1

似乎你正在做一个商业应用程序。考虑在靠近正文的位置添加一个侦听器，并添加一个数据单击属性以及要进行的调用。这使您可以扩展而不会在整个页面上爆炸您的侦听器。添加性能，您不必将侦听器添加到新元素。

短道路：将.onclick类添加到您收听的所有内容和

=SUMIF(A2:A4,"Red",B2:B4)+SUMIF(A2:A4,"Yellow",B2:B4)

编辑：漫漫长路：我建了一个图书馆，可以让你按照我的解释。有一个新的JSBin示例here。基本上你只是为你的html添加属性是自动的。这样它就可以使用你生成的所有新html而无需任何新的监听器。

它还支持鼠标和触摸，以及滑动和长按。它还允许您控制preventDefault和stopPropagation以及以编程方式添加和删除事件。

来自jsbin的例子：

$(".criteria:not('.onclick')).on("click", somefunction);

我还为它创建了一个npm模块here

动态项目未触发（.on（＆＃34; click＆＃34;）事件

1 个答案: