啟用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方法將附加到與選擇器匹配的當前和將來元素。