Потерять клик, даже если страница загружена с помощью ajax

Question

У меня есть страница с левым навигатором, которая имеет две ссылки и главный div. Основной div обновляется с содержимым с сервера всякий раз, когда пользователь щелкает ссылку в левом навигаторе. Для этого я использую pjax.

Когда пользователь первоначально приходит на эту страницу, главный div имеет ссылку с id somelink, которая показывает окно предупреждения, когда пользователь нажимает на гиперссылку. Это достигается с помощью этого кода:

$(document).ready(function() { 
    ..... 
    $('#somelink').click(function (event){ 
     alert("here"); 
    }); 
    .... 
    }); 

Когда вторая ссылка на навигационной панели нажата, я загружать содержимое с сервера и обновлять основной DIV. Когда пользователь щелкает первую ссылку, я снова загружаю контент с сервера и обновляю главный div. Однако на этот раз, когда я нажимаю somelink, ничего не происходит. Как будто jQuery не может обнаружить, что есть ссылка с id somelink, потому что она была загружена через ajax.

Есть ли способ преодолеть это?

Answer 1

Вам необходимо использовать .on и делегировать обработчик кликов на элемент более высокого уровня, который не заменяется, поскольку он загружен с помощью AJAX.

$(main).on('click', '#somelink', function() { 
    alert("here"); 
}); 

Причина в том, что когда вы делаете $('#somelink'), он проходит через DOM и находит каждый из них, как это. Поэтому, когда вы удаляете его путем замены, вам нужно либо добавить это снова, либо использовать .on

Answer 2

Вы заменили элементы и, следовательно, вложенные события. Вам нужно добавить их по-другому, чтобы автоматически получать их после обновлений dom.

Попробуйте функцию on:

$('#somelink').on('click', function() {}); 

Старых версии JQuery делать с «живой» функцией и с еще более старой версией вы должны связать свои события снова после каждого обновления йот.