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方法附加到与选择器匹配的当前和将来的元素。

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

2 个答案: