爲什麼jquery detach元素會導致表單提交？

Question

我不知道爲什麼在下面的例子中，試圖detach元素（li），使其包含到submit

HTML

<form id="frmToDo" name="frmToDo"> 
    <p id="lineInput"> 
    ... 
    <input type="submit" id="btnSubmit" value="Add" /> 
    </p> 
    <ul id="todolist"> 
     <!-- added in ajax --> 
    </ul> 
</form> 

JS

$("#frmToDo").submit(function() { 
    // this runs after: $("#todolist").detach(...) 
}); 

$("#todolist").delegate("li[id^=task-] button", "click", function() { 
    $("#todolist").detach($($(this).parent()).id()); 
    return false; 
}); 

Answer 1

我猜你只是想刪除li元件，其中被點擊的按鈕。

因此，而不是使用

$("#todolist").delegate("li[id^=task-] button", "click", function() { 
    $("#todolist").detach($($(this).parent()).id()); 
    return false; 
}); 

嘗試使用

$("#todolist").delegate("li[id^=task-] button", "click", function() { 
    $(this).parent().detach(); 
    return false; 
}); 

Answer 2

這就是form不是一個按鈕，它是一個輸入元素。

$("#todolist").delegate("li[id^=task-] input:submit", "click", function() { 

Answer 3

我不知道，如果這是你的問題的原因，但你沒有正確使用detach功能，如果你的目的是要分離的li元素。 detach函數的參數是一個選擇器表達式，用於過濾要調用函數的jQuery元素中的匹配元素集合。在你的代碼中，你可以在$('#todolist')上調用detach，這意味着你想要分離todolist元素，如果它匹配傳遞的參數。

你應該做這樣的事情，而不是：

$('#todolist li').detach(); //this will detach all the li elements 

我不知道這是否可以解釋的事實，你的形式提交。如果不是：什麼事件觸發了表單的提交事件？也許你使用放置在表單內的按鈕或輸入元素並觸發表單提交？

Answer 4

除非缺少一些相關的代碼，否則您似乎爲$(document).ready()塊之外的onclick事件分配了一個處理程序。這樣可以在加載#todolist之前運行分配，因此無法找到按鈕和附加處理程序。

在沒有事件取消的情況下，按鈕的默認行爲是提交表單。

試試這個：

$(document).ready(function(){ 
    $("#frmToDo").submit(function() { 
     // this runs after: $("#todolist").detach(...) 
    }); 

    $("#todolist").delegate("li[id^=task-] button", "click", function() { 
     $("#todolist").detach($($(this).parent()).id()); 
     return false; 
    }); 
});