2015-09-17 2 views
0

У меня есть код JS, который подсчитывает количество символов в текстовом поле. Он работает один раз, но как только элемент перезагружается с обновленными данными, которые он не выполняет с последующими запросами.Код Javascript не работает после перезагрузки элемента

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

Как я могу получить код для работы после того, как элемент перезагружается?

+0

Так вы говорите, что вы измените значение 'textarea' в коде? Где код, который это делает? Это вызов AJAX? –

+0

Нет, я не изменю значение textarea в коде. я просто перезагружаю элемент div с помощью ajax некоторыми данными, такими как первая загрузка. <Текстовое поле ID = "TextMsg">

کارکتر

< 'Num' SPAN класс => پارت

parham2501

+0

Вам нужно будет включать код, который обновляет 'div' с помощью AJAX, то , –

ответ

0

Вы добавляете прослушиватели событий к элементам, которые уничтожаются при обновлении содержимого div. Таким образом, обработчики событий также удаляются!

Что вы можете сделать, это использовать метод jQuery on(), который позволяет добавить прослушиватель событий в родительский div (который не будет удален) на конкретном селекторе (например, ваш texteara). Таким образом, обработчик событий не будет уничтожен и продолжит прослушивать события после обновления div.

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

Вы можете увидеть рабочий пример здесь: http://jsfiddle.net/royto/pjfcgsx6/

+0

Большое вам спасибо. Уважаемый Жюльен. он решает мою проблему. Желаю тебе удачи – parham2501

Смежные вопросы