为什么我的 jQuery 不适用于通过 ajax 加载的元素？答案

【问题标题】：Why doesn't my jQuery work for elements loaded via ajax?为什么我的 jQuery 不适用于通过 ajax 加载的元素？
【发布时间】：2015-01-16 06:31:29
【问题描述】：

我有一个 jsp 页面，其中包含一个包含以下元素的表单：

<form class="form-inline" role="form" action="CadsInsertion" method="POST">
    <div id="formItems" class="form-group">
        <input type="text" id="date" name="date" placeholder="Date"><label class="btn btn-danger" id="_date">-</label>
    </div>
    <div class="col-lg-6 col-lg-offset-3">
        <button id="submit" type="submit" class="btn btn-warning btn-lg">Submit</button>
    </div>
</form>

加载页面时，我使用以下 jQuery 添加更多从我的 Servlet FormElements 获取的元素。

$(document).ready(function() {
    $.ajax({
        url: "FormElements",
        data: {docType: "<%=session.getAttribute("docType")%>"},
        success: function(data) {
            if(data != null) {
                $("#formItems").append(data);
            }
    }});
});

我在 servlet 中主要做的是处理来自 ajax 调用的数据并相应地编写一些 jsp 元素。为简单起见，我将省略 Servlet 实现，直接跳到输出。

ajax代码执行后，formItems分区中添加新元素：

<input id="Image" type="text" placeholder="Image" name="Image">
<label id="_Image" class="btn btn-danger">-</label>
<br>
<input id="Format" type="text" placeholder="Format" name="Format">
<label id="_Format" class="btn btn-danger">-</label>
<br>
<input id="Type" type="text" placeholder="Type" name="Type">
<label id="_Type" class="btn btn-danger">-</label>

现在我的问题是，我使用以下 jQuery 从表单中删除元素：

$("label").click(function(e) {
    var item = e.target.id;
    item = item.replace("_", "");
    $("#" + item).remove();
    e.target.remove();
});

但这仅适用于已在我的页面中静态定义的元素，不适用于使用 ajax 加载的元素。这是为什么呢？

【问题讨论】：

您使用的是哪个版本的 jquery？

标签： javascript jquery ajax jsp servlets

【解决方案1】：

添加元素后，您需要重新绑定处理程序或使用 jQuery 的 on() 函数。

您需要delegate the event 到页面内最近的静态祖先元素（另请参阅“Understanding Event Delegation”）。这只是意味着，您绑定事件处理程序的元素在绑定处理程序时必须已经存在，因此对于动态生成的元素，您必须允许事件冒泡并进一步处理它。

使用这个

 // instead of document you can use any parent element selector which is static(does not appended)
 $(document).on("click","label",(function(e) {
        var item = e.target.id;
        item = item.replace("_", "");
        $("#" + item).remove();
        e.target.remove();
    });

【讨论】：

因为当你的代码执行时没有元素可以绑定事件，所以你必须在整个文档上绑定事件并添加过滤器。
在我们的例子中你不需要使用document，这没有意义，你可以使用#formItems作为父级，因为这个项目原本就在页面上......
是的，你是对的，我在评论中提到可以使用页面上存在的任何父元素。
感谢您的解释。 +1

【解决方案2】：

使用event delegating

$("#formItems").on('click', 'label', function(e) {
   var item = e.target.id;
   item = item.replace("_", "");
   $("#" + item).remove();
   e.target.remove();
});

【讨论】：

【解决方案3】：

$(".form-inline").on('click', 'label', function(e) {
   var item = e.target.id;
   item = item.replace("_", "");
    $("#" + item).remove();
    e.target.remove();
 });

【讨论】：

请添加一些解释。