Почему мой код JQuery не работает после загрузки данных через ajax?

Question

У меня есть вид дерева с этим Jquery код:

$(".treeView").on("click", ".CollOpen, .CollClosed", function() { 
    $(this).toggleClass("CollOpen CollClosed").nextAll('ul').first().toggle(); 
}); 

Она работает правильно, когда страница загружена. Когда древовидный вид изменен, а затем загружен Ajax, он не работает (у меня есть + и - для открытого и закрытого дочернего элемента, но когда я нажимаю на + или - что-нибудь случается). Если я обновляю свою страницу, он снова работает правильно. Почему?

Помогите, пожалуйста?

Answer 1

С чего вы показали, что если вы замены на .treeview элемент, то обработчик не будет создан для обработки новый, заменяющий элемент .treeview.

Если это так, вы можете просто привязать событие к контейнеру древовидной структуры, в основном к первому элементу, который не заменяется. Например .:

$(".treeview_container_that_stays_put").on("click", ".treeView .CollOpen, .treeView .CollClosed", function() { 
    $(this).toggleClass("CollOpen CollClosed").nextAll('ul').first().toggle(); 
}); 

Вы можете даже использовать $(document.body).on(..., но, как правило, есть неизменный контейнер ближе к тому, что вы работаете с чем.

Answer 2

Попробуйте использовать тело тег вместо динамически изменен .treeview:

$("body").on("click", ".CollOpen, .CollClosed", function() { 
    $(this).toggleClass("CollOpen CollClosed").nextAll('ul').first().toggle(); 
});