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（）事件绑定到这些图像......但我发现由于图像在加载时不在页面上，因此click事件永远不会被绑定。当我删除所有代码并在没有AJAX的情况下加载图像时，点击绑定就可以了。

所以...我的问题在这里...有没有办法将click事件绑定到通过AJAX加载后的图像？

供参考......我确实制作了一个jsBin HERE，但它基本上只是对图像进行了硬编码，我认为它可以在没有AJAX的情况下工作。

Answer 1

尝试：

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

由于$.on将事件处理程序附加到父项，并且子项中的所有事件都委托给父项

Documentation

Answer 2

是的，您完全可以将事件句柄附加到动态加载的DOM节点上。诀窍是使用jQuery.get而不是.load。 .get允许您添加一个在AJAX完成时执行的附加回调函数 - 这是添加$("#formattingSection div img")代码的最佳位置。这就是它的样子：

$('#loadSmileys').click(function() {
    $('#formattingSection').get ({
       url: "formattingdoc.html",
       success: success
    });
});

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

Answer 3

$('#formattingSection').load ('formattingdoc.html #formatting', function( response, status, xhr ) {
    loading_completed();
});
function loading_completed()
{
$('#formattingSection div img').click(function() {
    var code = $(this).attr("title");
    alert (code);
    $('wallpost').val($('wallpost').val() + code);
});

}

试试这个

Answer 4

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

Answer 5

您应该使用'on'方法。这可以将click处理程序应用于调用on方法后创建的元素。

e.g。

$("#formattingSection").on("click","div img",function() {
    ...
}

随着imges的添加，它们将自动获得点击处理程序功能。

我问的这个问题有助于解释差异：jquery use of bind vs on click

绑定点击通过AJAX加载的图像

5 个答案: