Question

我有JS代码来计算textarea中的字符数。它只运行一次，但是一旦元素重新加载了更新的数据，它就会随后的请求而失败。

＆＃13;

<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>

＆＃13;

如何在重新加载元素后让代码生效？

Answer 1

将事件侦听器添加到更新div内容时销毁的元素。因此事件处理程序也会被删除！

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

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

您可以在此处查看一个有效的示例：http://jsfiddle.net/royto/pjfcgsx6/

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

1 个答案: