更改html内部时，类.on（click）失败

Question

第一次我有一个.on（click）可以正常工作，但是第二次却失败了，其方式如下。 这是代码：

$('.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与第一次完全相同，这也只会在第二次发生。 为什么会这样呢？

Answer 1

我认为你需要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) 。

Answer 2

尝试这个：

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

Answer 3

我接受了另一个答案，该答案有效，但这是上乘的：

    $('.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，它也仍然绑定到该元素。 希望对类似情况的人有所帮助。