为什么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; 
    }); 
});