0

我有一个 .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);
             })
        }
});

单击具有类 inline-edit 的时<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 与第一次完全相同。为什么会这样？

4

3 回答 3

3

你需要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)一遍又一遍地调用。

于 2013-08-08T17:25:35.450 回答
0

试试这个：

$('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);
             })
        }
});
于 2013-08-08T17:20:32.737 回答
0

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

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

于 2013-08-09T12:56:34.153 回答