Question

这是代码：

<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");
    });

当我点击“上传”元素时，它会触发click和change个事件，并提醒“aa”和“upload_3”。然后在HTML中的“upload”元素之后添加了<input type="file" name="upload_3" id="upload_3"/>。但是当我点击新添加的元素（“upload_3”元素）时，click和change甚至不会触发。

Answer 1

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

这可能会对您有所帮助：

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

另请查看documentation。

Answer 2

事件在加载DOM（静态元素）时绑定到元素。在动态添加元素时，您需要自己附加事件。

以下代码会使用bind()将点击事件绑定到动态添加的元素。

$(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（）方法提供了附加事件处理程序所需的所有功能。

来自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');
});

Answer 3

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

来完成

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

在这种情况下，#parent节点指的是<input>元素中最近的父节点。 click事件首先由此父节点处理，然后在调用click处理程序之前进行翻译，以确保this引用正确的节点。

Answer 4

您可以使用“on”或“live”作为动态添加到DOM的元素。但“开”是首选。

$('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
});

使用.after（）方法添加的jquery元素不会触发事件

4 个答案: