使用.after()方法添加的Jquery元素不会触发事件

jquery elements that were added with .after() method do not trigger events

本文关键字：元素 事件 Jquery after 方法 添加 使用      更新时间：2023-09-26

这是代码:

<s:file name="upload"  id="upload"></s:file>
  $('input[id^="upload"]').change(function(){
        alert("aa");
        $(this).after('<input type="file" name="upload_3" id="upload_3"/>');
        alert($("#upload_3").attr("name"));
    });
    $('input[id^="upload"]').click(function(){
        alert("click");
    });

当我点击"upload"元素时，它触发click和change事件，并警告"aa"answers"upload_3"。然后在HTML中的"上传"元素之后添加了<input type="file" name="upload_3" id="upload_3"/>。但是当我点击新添加的元素("upload_3"元素)，click和change甚至不触发。

您需要将事件处理程序附加到动态附加的元素上。使用jQuery, .on()方法将事件处理程序附加到jQuery object中当前选定的元素集。从jQuery 1.7开始，.on()方法提供了附加事件处理程序所需的所有功能。

这可能对你有帮助:

$(document).on('click','input[id^="upload"]',function(){
    alert("click");
});

还可以看一下文档

事件在加载DOM时绑定到元素(静态元素)。当你动态地添加一些元素时，你需要自己附加事件。

下面的代码将使用bind()将click事件绑定到动态添加的元素。

$(this).after('<input type="file" name="upload_3" id="upload_3"/>').bind('click', function(){
    alert('Click event fired for the new element');
});

你也可以使用on方法。从jQuery 1.7开始，.on()方法提供了附加事件处理程序所需的所有功能。

From jquery doc:

事件处理程序仅绑定到当前选定的元素;他们必须在代码调用.on()时存在于页面上。如果要向页面注入新的HTML，请选择元素和在新的HTML放入页面后附加事件处理程序。

$(this).after('<input type="file" name="upload_3" id="upload_3"/>').on('click', function(){
    alert('Click event fired for the new element');
});

在这种情况下，您需要设置一个委托事件处理程序;这可以通过使用.on():

完成
 $('#parent').on('click', 'input[id^="upload"]', function() {
     // do your stuff here
 });

在本例中，#parent节点引用<input>元素最接近的父节点。单击事件首先由父节点处理，然后在调用单击处理程序之前进行翻译，以确保this引用了正确的节点。

您可以对动态添加到DOM中的元素使用"on"或"live"。但"on"是首选。

$('input[id^="upload"]').change(function(){
    var _this = $(this)
    $('<input type="file" name="upload_3" id="upload_3"/>').insertAfter(_this);
    });
$(document).on('click','input[id^="upload"]',function(){
    // do your stuff
});
相关文章：