javascript - 将点击绑定(bind)到通过 AJAX 加载的图像

Question

我在处理这段代码时遇到了一些问题，我想我终于缩小了问题的范围。这是 jQuery 函数...

$(document).ready(function(e) {
    $('#formattingSection').load ('formattingdoc.html #formatting');

    $('#loadFormatting').click(function() {
        $('#formattingSection').load ('formattingdoc.html #formatting');
    });

    $('#loadSmileys').click(function() {
        $('#formattingSection').load ('formattingdoc.html #smileys');
    });     

    $('#formattingSection div img').click(function() {
        var code = $(this).attr("title");
        alert (code);
        $('wallpost').val($('wallpost').val() + code);
    });
});

基本上，它是这样工作的。页面加载，我们通过 AJAX 加载文档的一部分。页面上有四个按钮，每个按钮都通过 AJAX 加载一个新部分。当您单击#loadSmileys 时，它将通过 AJAX 加载多个图像并将它们显示在 DIV 中。

我正在将 click() 事件绑定(bind)到这些图像...但我发现，由于图像在加载时不在页面上，因此 click 事件永远不会被绑定(bind)。当我剥离所有代码并在不使用 AJAX 的情况下加载图像时，点击绑定(bind)正常。

所以...我的问题是...有没有办法在图像通过 AJAX 加载后将点击事件绑定(bind)到图像？

供引用...我做了一个jsBin HERE ，但它基本上只是对图像进行硬编码，我可以看到它在没有 AJAX 的情况下工作。

Answer 1

尝试:

$("#formattingSection").on("click","div img",function() {
        var code = $(this).attr("title");
        alert (code);
        $('wallpost').val($('wallpost').val() + code);
    });

由于 $.on 将事件处理程序附加到父级，所有来自子级的事件都委托(delegate)给父级

Documentation