jquery - 将 jquery ajax 功能重新分配给被操纵的元素

Question

我在 JS 中有一个名为 AssignAJAXEvents() 的函数，其设置如下：

function AssignAJAXEvents(containerSelector)
{
    containerSelector = containerSelector || 'body';

    $("input[type='submit']",containerSelector).filter('.ajax').unbind('click').bind('click',function(){
        var container = $(this).closest('*.lc');

        $.ajax({
            beforeSend: function(){ $(loading).show(); },
            timeout: 60000, // 60 seconds
            error: function() { },
            type: "POST",
            dataType: "html",
            data: post_data,
            url: "/ajax.php?Ajax&Page=" + page + "&" + action_name + "=" + action_value,
            success: function(data) {
                $(loading).hide();

                container.hide().replaceWith(data).show();

                AssignAJAXEvents(container);
            }
        });

        return false;
    });
}

jQuery(document).ready(function() {
    AssignAJAXEvents();
});

当页面最初加载时，函数将事件加载到“body”，这是整个元素。当 ajax 调用完成时，我只想将此事件加载到受影响的容器中。否则它会浪费已经分配的资源事件和整个“body”匹配的元素都会受到影响。

如何将此事件仅分配给新填充的容器？

Answer 1

function AssignAJAXEvents(containerSelector)
{
    containerSelector = containerSelector || 'body';

    $("input[type='submit']",containerSelector).filter('.ajax').one('click',function(){
    var container = $(this).closest('*.lc');
     $.ajax({
        beforeSend: function(){ $(loading).show(); },
        timeout: 60000, // 60 seconds
        error: function() { },
        type: "POST",
        dataType: "html",
        data: post_data,
        url: "/ajax.php?Ajax&Page=" + page + "&" + action_name + "=" + action_value,
        success: function(data) {
            $(loading).hide();
            container.hide().replaceWith(data).show();
            AssignAJAXEvents(container);
        }
    });

    return false;
    });
}