0

我有以下代码片段。

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();         
    });

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

为了使此功能以正确的方式工作，我缺少哪个步骤/设置？

4

2 回答 2

4

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

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

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

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

请注意，这.live()已经过时了。您应该更新以改用该.on()方法的委托语法..

于 2013-02-23T11:28:12.507 回答
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()在文档上有一个处理程序，用于检查事件的目标是否与选择器匹配。click 处理程序完成后，DIV 的类已更改为delete，因此此检查成功，并运行处理程序。

于 2013-02-23T11:27:52.637 回答