javascript - ajax 加载后如何重新绑定(bind) jquery 调用？

Question

好吧，我使用砌体脚本在网格中排列图像，我将其放置在外部脚本的函数 arange_images() 中。

在我的主脚本中我调用

$(document).ready(function(){
    arange_images();      //<- Works lovely
});

然后我决定用ajax加载一些其他图像。之后，我的图像就不再被排列了。

function get_img(section_id) {
$.ajax({
    type: 'GET',
    url: './db/get_img.php',
    data: {
        section_id: section_id
    },
    success: function (data) {

        var data_parsed = JSON.parse(data);
        var images = '<div class="grid-sizer"></div><div class="gutter-sizer"></div>';

        $.each(data_parsed, function (i, picture) {
            images += '<div class="member">';
            images += '    <img src="img/pictures/' + picture.path + '" alt="' + picture.alt + '"/>';
            images += '</div>';
        });

        $('.grid').html(images);

        arange_images();       //<- Does not work

    }

 });
}





$('.section_selector').click(function () {
        get_img($(this).attr('data-section_id'));
        arange_images();           //<- Does not work either
    });

搜索类似的错误对我没有帮助。ajax后jquery的大部分问题都是.click替换为.on('click')。我读到我需要重新绑定(bind) jquery 调用，但我不太明白在这种情况下该怎么做。

Answer 1

您的 .click() 处理程序将仅绑定(bind)文档准备就绪时存在于 DOM 中的元素。由于您需要在 ajax 调用后绑定(bind)到元素，因此使用 .on() .

Keep Calm and Call .on

$(document).on('click', '.section_selector'), function () {
    get_img($(this).attr('data-section_id'));
});