Question

我有一些div，它们是从PHP脚本动态创建的，并通过AJAX显示在页面上。这些div有一个链接就可以打开一个模态。当页面首次加载链接时工作得很好。当脚本更新并且页面上显示新数据时，新数据的链接不起作用。因此我发现我需要通过.on（单击）绑定事件。

这是我遇到的问题，因为它们不是要绑定的静态ID。 ID是根据从第三方API创建的JSON文件中的ID动态生成的。

    $AlertData .= "<div class='alert__view' id='eventID'>\n";
    $AlertData .= "<a href='#{$eventID}' data-toggle='modal' data-backdrop='false' data-target='#{$eventID}'><i class='fa fa-info-circle'></i></a>\n";
    $AlertData .= "</div>\n";

$ eventID是链接的ID以及为了打开而链接到的模式的ID。那么我如何将动态ID绑定到通过PHP解析JSON文件生成的动态ID呢？现在我知道的一件事是，因为链接使用动态ID，我可以将函数绑定到它的父母之一。在这种情况下，＆＃39; eventID＆＃39;但这仍然让我的目标ID是动态生成的，我不知道如何处理这个或者我应该将模式换成新的，所以我可以指定一个父ID来处理这个？

以下是代码片段，用于更新PHP文件以在页面上显示更新的数据/信息PLUS添加的事件绑定，因为我认为它应该是。

$.ajax({
          url: "inc/alertsTX.php",
          cache: false,
          success: function(data){
             $("#svrAlertsTX").html(data);
               $('#eventID'.on('click', function () {
                  $(#$eventID).html(data);
          }
         }
        });

Answer 1

绑定时使用selector

.on( events [, selector ] [, data ], handler )

像这样

$('.alert__view').on('click', 'a', function () { ...

或者你可以绑定上层（不推荐）

$('body').on('click', '.alert__view > a', function () { ...

来自docs

提供选择器时，事件处理程序称为委托。当事件直接发生在绑定元素上时，不会调用处理程序，但仅适用于与选择器匹配的后代（内部元素）。

委托事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。

具有动态ID的事件绑定

1 个答案: