Функция JQuery больше не работает после разбиения на страницы

Question

Я использую CodeIgniter для своего сайта. На одной странице я показываю разные автомобили. Пользователь может просматривать все результаты с нумерацией страниц.

У меня также есть несколько выпадающих списков, которые пользователь может использовать для дальнейшей фильтрации результатов. Один выпадающий список содержит основную категорию с марками (Mercedes, DAF, ...)

Второй выпадающий список содержит типы транспортных средств. Для этого ящика я создал функцию JQuery, которая обновляет содержимое ящика в соответствии с маркой, выбранной в первом ящике. Это больше не работает, когда я нажимаю на ссылку для нумерации страниц, чтобы перейти на следующую страницу. Я думаю, это как-то связано с тем, что функция создается в готовой части. Может кто-нибудь помочь, пожалуйста?

JQuery код:

<script type="text/javascript">
function updateTypes(){
    $.ajax({
        type: "POST",
        data: "merk_id=" + $('#selection').val()  + "&voertuig=" + $('#voertuig').val(),
        url: "dropdown",
        success: function(msg){
            if (msg != ''){
                $("#selectionresult").html(msg).show();

            }
        }
    });
}


    $("#selection").change(updateTypes);


    // Update types when entering the second box with the mouse
    $("#selectionresult").mouseenter(updateTypes);

В первом поле есть id = selection, а во втором - id = selectionresult

Заранее спасибо!

Answer 1

Похоже, что вызов .html() стирает ранее связанный обработчик события click. Используйте .live() или .delegate() вместо .click(). Изменение

$("#selection").change(updateTypes);

до

$("#selection").live('change', updateTypes);
// or
$('some ancestor of #selection').delegate('#selection', 'change', updateTypes);

Выполнение этого привязывает прослушиватель событий вверх по дереву DOM, поэтому слушатель не будет уничтожен вызовом $("#selection").html().

Answer 2

Попробуйте использовать

$('body').delegate('#selection', 'propertychange change', function(){ 
  updateTypes();
}); 

Answer 3

Пересматриваются ли селекторы при разбиении на страницы? Если это так, вам нужно снова связать события .change() и .mouseenter(), поскольку исходные объекты больше не присутствуют.

Взгляните на jquery.delegate ()