Question

我有以下代码段。

HTML（简化）：

    <tr>
    <td><div id="insert_24" class="insert">Invoegen</div></td>
    </tr>

运行（简化）JS函数以从表单中检索数据，将其添加到数据库，然后使用正确的类和表更新表单/表。 ID的：

    $(".insert").click(function() {
        // current field, is the id: insert_24
        // layer is retrieved in the function: 24
        // Full table has the id 'canvas'

        // do something
        // Insert into database

        console.log('insert-'+layer);
        $("#"+ current_field).removeClass("insert").addClass("delete").html('delete').attr('id', 'delete_'+layer);
        $("table#canvas tr:last").attr('id', 'row_'+layer);
    });

在此代码之后，我还有代码删除一行（简化）：

    $(".delete").live("click", function() {
        // do something
        // Insert into database

        console.log('delete-'+layer);
        $("#row_"+ layer).remove();         
    });

插入工作完美，但是当我查看控制台日志功能时，在'insert'上，插入后也会直接触发'delete'功能，这没有意义。我只点击了<div>一次。

我缺少哪个步骤/设置让这个功能以正确的方式工作？

Answer 1

将click()处理程序更新为return false;或：

$(".insert").click(function(e) {
    e.stopPropagation();
    // your code here
});

.live()通过在文档级别附加处理程序并等待事件冒泡来工作 - 此时它会检查原始目标元素是否与您使用的选择器匹配。因此，当发生单击时，它首先触发（非实时）单击处理程序，然后冒泡以触发实时处理程序。

另请注意，从元素中删除"insert"类不会阻止单击处理程序触发该元素。您需要取消绑定单击处理程序（在处理程序中）或将其更改为实时处理程序。

请注意，.live()已过时。您应该更新以使用.on() method的委托语法代替..

Answer 2

试试这个：

$(".insert").click(function(e) {
    e.stopPropagation();
    // current field, is the id: insert_24
    // layer is retrieved in the function: 24
    // Full table has the id 'canvas'

    // do something
    // Insert into database

    console.log('insert-'+layer);
    $("#"+ current_field).removeClass("insert").addClass("delete").html('delete').attr('id', 'delete_'+layer);
    $("table#canvas tr:last").attr('id', 'row_'+layer);
});

正在发生的事情是点击事件正在冒泡到文档。 .live()在文档上有一个处理程序，用于检查事件的目标是否与选择器匹配。点击处理程序完成后，DIV的类已更改为delete，因此此检查成功，并运行处理程序。

Jquery .live问题

2 个答案: