[英]class .on(click) failing when html inside is changed
I have a .on(click) perfectly working the first time, but fails the second, in the way I describe below. 第一次我有一个.on(click)可以正常工作,但是第二次却失败了,其方式如下。 This is the code:
这是代码:
$('.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);
})
}
});
When the <td>
that has the class inline-edit are clicked, the value in the inner span is obtained, and an input is enabled. 单击具有内联编辑类的
<td>
,将获得内部范围中的值,并启用输入。 This way the user can do an inline edit. 这样,用户可以进行内联编辑。 When the user clicks outside the
<td>
, the edit is canceled, calling cancelEdit(), which is: 当用户在
<td>
之外单击时,将取消编辑,并调用cancelEdit(),即:
function cancelEdit(element, value) {
$(element).html('<span>' + value + '</span><img id="pencil_edit" src="/images/pencil_edit.png">');
}
The cancelEdit function returns the <td>
to its original form, which is: cancelEdit函数将
<td>
返回其原始形式,即:
<td class="inline-edit">
<span>abcdpqsdfsdfsdfrstuvwxyz<?php echo $i?></span>
<img id="pencil_edit" src="/images/pencil_edit.png"/>
</td>
The problem is that after cancelEdit is called, now when the user clicks on the <td>
, if they click over the <span>
part (the text), the .on('click')
function does not work properly, because the <span>
element is being obtained, instead of the <td>
. 问题在于,在调用cancelEdit之后,现在当用户单击
<td>
,如果他们单击<span>
部分(文本),则.on('click')
函数将无法正常工作,因为正在获取<span>
元素,而不是<td>
。 This however only happens the second time, even though the html is exactly the same as the first time. 但是,即使html与第一次完全相同,这也只会在第二次发生。 Why is this happening?
为什么会这样呢?
You need to stopPropagation
I think fiddle : 我认为你需要
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">');
}
I also set a variable for the element because there's really no need to keep calling $(this)
, over and over. 我还为该元素设置了一个变量,因为确实不需要一遍又一遍地调用
$(this)
。
Try 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);
})
}
});
I had accepted another answer, which works, but this is superior: 我接受了另一个答案,该答案有效,但这是上乘的:
$('.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);
})
}
});
I removed the event.stopPropagation() from above, which is not needed if cancelEdit looks like this: 我从上面删除了event.stopPropagation(),如果cancelEdit看起来像这样,则不需要:
function cancelEdit(element, value) {
$(element).html('<span>' + value + '</span><img id="pencil_edit" src="/images/pencil_edit.png">');
$(element).unbind('clickoutside');
}
The trick is unbinding the clickoutside, otherwise it remains binded to the element, even with the new html. 诀窍是解除Clickoutside的绑定,否则,即使使用新的html,它也仍然绑定到该元素。 Hope that helps someone in a similar situation.
希望对类似情况的人有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.