Question

我有一个.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与第一次完全相同。为什么会这样？

Answer 1

您需要stopPropagation我认为fiddle：

$('.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。希望能帮助处于类似情况的人。

更改html内部时类.on（单击）失败

3 个答案: