Javascript 更改内部html时（单击）失败

我有一个.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'）。在（'click'，function（）上{
if（！$（this）.find（':input'）.length）{
var current_val=$（this.find（'span'）.html（）；
$（this.html（“”）；
//单击“取消”
$（this）.unbind（'clickoutside'）.bind（'clickoutside'，函数（事件）{
取消编辑（$（此），当前值）；
})
}
});

单击具有类内联编辑的

时，将获得内部范围中的值，并启用输入。这样用户就可以进行内联编辑。当用户在

之外单击时，编辑被取消，调用cancelEdit（），即：

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

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

函数取消编辑（元素、值）{
$（element.html（“”+value+“”）；
}

cancelEdit函数将

返回其原始形式，即：

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

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

ABCDPQSDFSDFSFRSTUVWXYZ

问题是，在调用cancelEdit之后，现在当用户单击

时，如果他们单击

部分（文本），则

.on（'click'）

函数无法正常工作，因为获取的是

元素，而不是

。然而，这只会发生在第二次，即使html与第一次完全相同。为什么会发生这种情况？

试试这个：

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

$（'body'）。在（'click'，'inline edit'，function（）上{
if（！$（this）.find（':input'）.length）{
var current_val=$（this.find（'span'）.html（）；
$（this.html（“”）；
//单击“取消”
$（this）.unbind（'clickoutside'）.bind（'clickoutside'，函数（事件）{
取消编辑（$（此），当前值）；
})
}
});

试试这个：

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

$（'body'）。在（'click'，'inline edit'，function（）上{
if（！$（this）.find（':input'）.length）{
var current_val=$（this.find（'span'）.html（）；
$（this.html（“”）；
//单击“取消”
$（this）.unbind（'clickoutside'）.bind（'clickoutside'，函数（事件）{
取消编辑（$（此），当前值）；
})
}
});

你需要

停止广播

我认为：

$（'.inline edit'）。打开（'click'，函数（ev）{
var td=$（本）；
如果（！td.find（':input'）.length）{
var current_val=td.find（'span'）.html（）；
td.html（“”）；
//单击“取消”
td.1（点击外部），功能（事件）{
取消编辑（td，当前值）；
})
}
ev.stopPropagation（）；
});
函数取消编辑（元素、值）{
$（element.html（“”+value+“”）；
}

---

我还为元素设置了一个变量，因为实际上不需要反复调用

$（this）

。

您需要

停止播放

，我认为：

$（'.inline edit'）。打开（'click'，函数（ev）{
var td=$（本）；
如果（！td.find（':input'）.length）{
var current_val=td.find（'span'）.html（）；
td.html（“”）；
//单击“取消”
td.1（点击外部），功能（事件）{
取消编辑（td，当前值）；
})
}
ev.stopPropagation（）；
});
函数取消编辑（元素、值）{
$（element.html（“”+value+“”）；
}

---

我还为元素设置了一个变量，因为实际上不需要反复调用

$（this）

。

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

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

$（'.inline edit'）。打开（'click'，函数（ev）{
var td=$（本）；
如果（！td.find（':input'）.length）{
var current_val=td.find（'span'）.html（）；
td.html（“”）；
//单击“取消”
td.解除绑定（'clickoutside'）。绑定（'clickoutside'，函数（事件）{
取消编辑（td，当前值）；
})
}
});

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

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

函数取消编辑（元素、值）{
$（element.html（“”+value+“”）；
$（元素）。取消绑定（'clickoutside'）；
}

---

诀窍是解除clickoutside的绑定，否则它仍然绑定到元素，即使使用新的html。希望这对处于类似情况的人有所帮助。

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

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

$（'.inline edit'）。打开（'click'，函数（ev）{
var td=$（本）；
如果（！td.find（':input'）.length）{
var current_val=td.find（'span'）.html（）；
td.html（“”）；
//单击“取消”
td.解除绑定（'clickoutside'）。绑定（'clickoutside'，函数（事件）{
取消编辑（td，当前值）；
})
}
});

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

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

函数取消编辑（元素、值）{
$（element.html（“”+value+“”）；
$（元素）。取消绑定（'clickoutside'）；
}

---

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

生活被贬低了。您是否尝试过在（）上使用？还有一个插件已经做到了这一点：Jeditable-jQuery就地编辑插件*没有理由再使用

live

（除非你的jQuery版本那么旧）：是的，on（）不会改变任何东西。是的，这是一个使用旧jQuery版本的项目，我现在必须使用live。我将所有内容都更改为.on（），因为问题是一样的。生活已经贬值了。您是否尝试过在（）上使用？还有一个插件已经做到了这一点：Jeditable-