Javascript 为什么jquery detach元素会导致表单提交？

我想知道为什么在下面的示例中，尝试分离元素（

li

）会导致包含它的

表单
提交

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>

这不是一个按钮，它是一个输入元素

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

这不是一个按钮，它是一个输入元素

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

我不确定这是否是问题的原因，但如果您打算分离
li
元素，则您没有正确使用
detach
功能。
detach
函数的参数是一个选择器表达式，用于过滤调用函数的jQuery元素中的匹配元素集。在代码中，您在
$（'#todolist'）
上调用
detach
，这意味着您希望分离todolist元素（如果它与传递的参数匹配）

您应该这样做：

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

我不确定这是否能解释您提交表格的原因。如果不是：什么事件触发表单的提交事件？可能您使用了放置在表单中的按钮或输入元素并触发表单提交？
我不确定这是否是问题的原因，但如果您打算分离
li
元素，则您没有正确使用
分离功能。
detach
函数的参数是一个选择器表达式，用于过滤调用函数的jQuery元素中的匹配元素集。在代码中，您在
$（'#todolist'）
上调用
detach
，这意味着您希望分离todolist元素（如果它与传递的参数匹配）

您应该这样做：

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

我不确定这是否能解释您提交表格的原因。如果不是：什么事件触发表单的提交事件？可能您使用的按钮或输入元素位于表单内部，并触发表单的提交？
除非缺少一些相关代码，否则您似乎在
$（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;
    });
});

除非缺少一些相关代码，否则您似乎在
$（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;
    });
});

我猜您只是想删除单击按钮的
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;
});

我猜您只是想删除单击按钮的
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;
});

显示的一个不在列表中。但是，OP可能混淆了这两个选项。所示的选项不在列表中。但是，OP可能混淆了两者。什么是
.id（）
？jQuery中没有我所知道的事情。它似乎将
.id（）
替换为
attr（“id”）
解决了表单提交的问题，委托仍然无法工作。但是想知道为什么这个错误会导致表单提交
.id（）
？jQuery中没有我所知道的事情。它似乎将
.id（）
替换为
attr（“id”）
解决了表单提交的问题，委托仍然无法工作。但是想知道为什么这个错误会导致表单提交