重新加载元素后 Javascript 代码失败答案

【问题标题】：Javascript code fails after element is reloaded重新加载元素后 Javascript 代码失败
【发布时间】：2015-09-17 19:05:11
【问题描述】：

我有 JS 代码来计算文本区域中的字符数。它工作一次，但一旦元素重新加载了更新的数据，它就会因后续请求而失败。

<head>
  <title>Test</title>
  <script type="text/javascript" src="jquery.min.js"></script>
</head>

<body>

<script>
var counter = function(el,char_el,num_el){
    var cha = el.val().length;
    var num = Math.ceil(cha / 160);
    if(num == 0)
        num = 1;
    char_el.html(cha);
    num_el.html(num);
}
$(document).ready(function(){
    $("#TextMsg").keyup(function(){
        counter($(this),$(".char"),$(".num"));
    });
    $("#TextMsg").keyup();
});
</script>

<div id='showsn'>
<textarea id="TextMsg"></textarea>
<p><span class='char'></span>کارکتر</p>
<p><span class='num'></span>پارت</p>
</div>

</body>

如何在元素重新加载后让代码工作？

【问题讨论】：

所以你是说你在代码中改变了textarea的值？执行此操作的代码在哪里？是否在 AJAX 调用中？
不，我不会更改代码中 textarea 的值。我只是通过一些数据（如第一次加载）用 ajax 重新加载我的 div 元素。
کارکتر

پارت
p>
然后您需要包含通过 AJAX 更新 div 的代码。
更新后需要再次调用函数

标签： javascript html reload

【解决方案1】：

您将事件侦听器添加到在更新 div 内容时被销毁的元素。所以事件处理程序也被删除了！

您可以做的是使用 jQuery on() 方法，该方法允许在特定选择器（例如您的 texteara）上的父 div（不会被删除）上添加事件侦听器。所以事件处理器不会被销毁，在div更新后继续监听事件。

 $('#showsn').on('keyup', '#TextMsg', function () {
    counter($(this), ".char", ".num");
});

你可以在这里看到一个工作示例：http://jsfiddle.net/royto/pjfcgsx6/

【讨论】：

非常感谢亲爱的朱利安。它解决了我的问题。祝你好运