jQuery动态生成span的Event handler失效问题排查（v1.12.4）

这个问题我太熟啦！你遇到的是jQuery里动态元素事件绑定的经典坑～

问题原因 #

你现在的写法是直接把click事件绑定到.uploaded_file_delete元素上：

$(".uploaded_file_delete").on("click", function(e){...})

但页面初始加载时，那些动态生成的<span>还不存在，所以jQuery找不到这些元素，自然没法把事件处理器绑定到它们身上——只有页面加载时就存在的“硬编码”span能被绑定到事件，这就是为什么只有它们生效。

解决方案：事件委托（Event Delegation） #

jQuery的on()方法支持事件委托，核心思路是：把事件绑定到一个页面加载时就已经存在的父元素（比如document，或者更接近目标元素的容器），然后通过第二个参数指定目标元素的选择器。这样后续动态生成的元素触发事件时，事件会冒泡到父元素，父元素会检查触发事件的元素是否匹配目标选择器，匹配的话就执行对应的处理器。

针对你的代码，修改后的写法如下：

// 推荐用更接近的父元素代替document（比如目标span的容器），性能更好
$(document).on("click", ".uploaded_file_delete", function(e){ 
    e.preventDefault(); 
    var fileurl = $(this).attr("data-fileurl"); 
    var data = { 
        fileurl: fileurl, 
        action: 'uploaded_file_delete' 
    }; 
    var deleteonsuccess = $(this).parent(); 
    $.ajax({ 
        url: someaction.ajax_url, 
        type: 'POST', 
        data: data, 
        cache: false, 
        dataType: 'json', 
        success: function(data, textStatus, jqXHR) {
            // 你的成功逻辑代码
        }
    });
});

额外提示 #

• 尽量不要用document作为委托父元素，最好找一个离目标元素最近的、页面加载时就存在的容器（比如如果所有上传文件的元素都在<div class="upload-container"></div>里，就用$(".upload-container").on(...)），这样能减少事件冒泡的层级，提升性能。
• 你用的jQuery 1.12.4完全支持这种委托写法，不用担心版本兼容问题。

内容的提问来源于stack exchange，提问作者b0xed