启用AJAX的表单仅使用AJAX提交一次，然后默认为HTTP请求

Question

启用AJAX的表单仅使用AJAX提交一次，然后默认使用标准HTTP请求。 代码如下：

    $('#urlContainer form').submit(function(){

        var p = {};
        p['url'] = $('input#url').val();

        if($('#urlContainer #results').length != 0){
            $('#urlContainer #results').fadeOut(1000, function() {
                $('#urlContainer').load(location.href+' #urlContainer>*',p,function(){
                    $('#urlContainer #results').hide();
                    $('#urlContainer #results').fadeIn(1000);

                });
            });
        } else {
            $('#urlContainer').load(location.href+' #urlContainer>*',p,function(){
                $('#urlContainer #results').hide();
                $('#urlContainer #results').fadeIn(1000);

            });
    }
    return false;
});

有任何想法吗？

提前致谢。

Answer 1

$('#urlContainer').load(...)

此代码替换#urlContainer所有内容。 所有元素都将被替换，这意味着绑定到它们的所有事件处理程序也将被替换。 您应该使用delegate()在尚不存在的元素上为事件运行代码：

$('#urlContainer').delegate('form', 'submit', function(){
    // the code from your submit handler
});

另外，您可以重写代码以避免抹去form元素，因此该处理程序将继续存在。

Answer 2

jQuery load函数用AJAX调用的结果替换匹配元素的内容。 发生这种情况时，将删除（或替换）您要绑定的表单，因此不会触发原始事件处理程序。

如果使用.live('submit' ...)而不是.submit ，它将解决您的问题：

$('#urlContainer form').live('submit', function(){
    ...
});

live方法将附加到与选择器匹配的当前和将来元素。