当内部的html被更改时，class.on(单击）失败

class .on(click) failing when html inside is changed

本文关键字：on class 单击 失败 内部 html      更新时间：2023-09-26

我有一个.on（点击）第一次完美地工作，但第二次失败了，如下所述。这是代码：

$('.inline-edit').on('click', function() {
       if (!$(this).find(':input').length) {
             var current_val = $(this).find('span').html();
             $(this).html('<input type="text" class="txt" maxlength="27" value="' + current_val + '"/>');
             //On outside click, cancel
             $(this).unbind('clickoutside').bind('clickoutside', function(event) {
                  cancelEdit($(this), current_val);
             })
        }
});

单击具有类内联编辑的<td>时，将获得内部跨度中的值，并启用输入。通过这种方式，用户可以进行内联编辑。当用户在<td>外部单击时，编辑被取消，调用cancelEdit（），即：

function cancelEdit(element, value) {
    $(element).html('<span>' + value + '</span><img id="pencil_edit" src="/images/pencil_edit.png">');
}

cancelEdit函数将<td>返回到其原始形式，即：

<td class="inline-edit">
     <span>abcdpqsdfsdfsdfrstuvwxyz<?php echo $i?></span>
     <img id="pencil_edit" src="/images/pencil_edit.png"/>
</td>

问题是，在调用cancelEdit之后，现在当用户单击<td>时，如果他们单击<span>部分（文本），.on('click')函数将无法正常工作，因为正在获得<span>元素，而不是<td>。然而，这种情况只发生在第二次，即使html与第一次完全相同。为什么会发生这种情况？

你需要stopPropagation我认为小提琴：

$('.inline-edit').on('click', function(ev) {
       var td = $(this);
       if (!td.find(':input').length) {
             var current_val = td.find('span').html();
             td.html('<input type="text" class="txt" maxlength="27" value="' + current_val + '"/>');
             //On outside click, cancel
             td.one('clickoutside', function(event) {
                  cancelEdit(td, current_val);
             })
        }
    ev.stopPropagation();
});
function cancelEdit(element, value) {
    $(element).html('<span>' + value + '</span><img id="pencil_edit" src="http://placehold.it/20">');
}

我还为元素设置了一个变量，因为实际上不需要一遍又一遍地调用$(this)。

试试这个：

$('body').on('click', '.inline-edit', function() {
       if (!$(this).find(':input').length) {
             var current_val = $(this).find('span').html();
             $(this).html('<input type="text" class="txt" maxlength="27" value="' + current_val + '"/>');
             //On outside click, cancel
             $(this).unbind('clickoutside').bind('clickoutside', function(event) {
                  cancelEdit($(this), current_val);
             })
        }
});

我接受了另一个答案，它有效，但它更优越：

    $('.inline-edit').on('click', function(ev) {
       var td = $(this);
       if (!td.find(':input').length) {
             var current_val = td.find('span').html();
             td.html('<input type="text" class="txt" maxlength="27" value="' + current_val + '"/>');
             //On outside click, cancel
             td.unbind('clickoutside').bind('clickoutside', function(event) {
                  cancelEdit(td, current_val);
             })
        }
    });

我从上面删除了event.stopPropagation（），如果cancelEdit看起来像这样，则不需要它：

function cancelEdit(element, value) {
    $(element).html('<span>' + value + '</span><img id="pencil_edit" src="/images/pencil_edit.png">');
    $(element).unbind('clickoutside');
}

诀窍是解除clickoutside的绑定，否则它仍然绑定到元素，即使是使用新的html。希望这能帮助到处境相似的人。

相关文章：