1

这是代码：

<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”。然后<input type="file" name="upload_3" id="upload_3"/>在 HTML 中的“上传”元素之后添加它。但是当我单击新添加的元素（“upload_3”元素）时，click甚至change没有触发。

4

4 回答 4

2

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

这可能会帮助您：

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

另请查看文档。

于 2013-04-17T04:18:24.973 回答
1

事件在加载 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 文档：

事件处理程序仅绑定到当前选定的元素；当您的代码调用 .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');
});
于 2013-04-17T04:22:42.920 回答
0

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

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

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

于 2013-04-17T04:26:41.610 回答
0

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

$('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
});
于 2013-04-17T04:39:07.370 回答