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

Question

我有计算文本区域中字符数的 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>

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

Answer 1

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

你可以做的是使用 jQuery on() 方法，该方法允许在特定选择器（你的 texteara for例子）。所以在div更新

后事件处理程序不会被销毁并继续监听事件。

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

您可以在此处查看工作示例：http://jsfiddle.net/royto/pjfcgsx6/

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

Javascript code fails after element is reloaded

html

javascript

reload