Question

我将有一个link“编辑”，您可以点击其中编辑某些字段。现在，在您单击链接后，应禁用要编辑的链接。我试图通过添加一个类editing来实现这一目标。因此，如果.not('.editing')运行其余代码...但我可以点击两次

我做错了什么？感谢收看和帮助 - ＆gt; Fiddle http://jsfiddle.net/s1v8n2Ld/

$('.edit-product').not('.editing').on('click', function(e){
    e.preventDefault();
    $(this).addClass("editing")
    var $table = $(this).closest('table');
    $table.find('.editable').each(function(i){
        var content = $(this).html().trim();
        $(this).wrapInner('<input type="text" name="" placeholder="'+content+'">');
    });
});

$('.edit-product2:not(.editing)').on('click', function(e){
    e.preventDefault();
    $(this).addClass("editing")
    var $table = $(this).closest('table');
    $table.find('.editable').addClass('xxxx');
    $table.find('.editable').each(function(i){
        var content = $(this).html().trim();
        $(this).wrapInner('<input type="text" name="" placeholder="'+content+'">');
    });
});



<table border="1" style="border-collapse:collapse;">
    <tr>
        <td>
            ID
        </td>
        <td>
            18
        </td>
        <td rowspan="4">
            <a href="/app_dev.php/edit/ 18" class="edit-product">Edit</a>
        </td>
    </tr>
    <tr>
        <td>
            Name
        </td>
        <td class="editable">
            New product name!
        </td>
    </tr>
    <tr>
        <td>
            Price
        </td>
        <td class="editable">
            19.99
        </td>
    </tr>
    <tr>
        <td>
            Description
        </td>
        <td class="editable">
            Lorem ipsum dolor
        </td>
    </tr>
</table>




<table border="1" style="border-collapse:collapse;">
    <tr>
        <td>
            ID
        </td>
        <td>
            18
        </td>
        <td rowspan="4">
            <a href="/app_dev.php/edit/ 18" class="edit-product2">Edit</a>
        </td>
    </tr>
    <tr>
        <td>
            Name
        </td>
        <td class="editable">
            New product name!
        </td>
    </tr>
    <tr>
        <td>
            Price
        </td>
        <td class="editable">
            19.99
        </td>
    </tr>
    <tr>
        <td>
            Description
        </td>
        <td class="editable">
            Lorem ipsum dolor
        </td>
    </tr>
</table>

Answer 1

您需要事件委派，因为在加载dom后添加了类.editing

$(document).on('click','.edit-product:not(.editing)'

或者像@ Karl-AndréGagnon在评论中指出的那样

检查元素是否在处理程序中编辑了类。

$('.edit-product').on('click', function(e){
     if(!$(this).hasClass('editing')){

Answer 2

你需要使用jQuery的event.stopPropagation（）函数防止事件冒泡DOM树，防止任何父处理程序被通知事件。

$('.edit-product').not('.editing').on('click', function(e){
e.stopPropagation();

jquery .not（）和：not（）不起作用

2 个答案: