YII2 Как мне сохранить Ajax-функции в GridView?

Question

Каждый, кому удалось создать функцию ajax в строке сетки;то есть от кнопки или ссылки определенной ячейки. Это хорошо работает. Однако после обновления сетки с помощью Ajax;Либо для сортировки или фильтрации;Эти функции больше не выполняются. Я наблюдаю эту проблему с Yii 1.x. То же самое происходит со сторонними библиотеками, такими как kartik \ editColumn. Они работают только в первый раз, после перезагрузки Grid, они больше не работают. Это неправильно?

Answer 1

Когда вы привязываете функциональность JS к этим ссылкам, вы привязываете их к элементам в DOM, которые присутствуют в момент, когда вы делаете привязку. Обычно это происходит, когда DOM создается при загрузке страницы.

После того, как ваш запрос ajax завершен, эти элементы со связанной функциональностью JS заменяются новыми элементами, но функциональность JS не привязана к этим новым элементам. Вот почему JS «перестает» работать после обновления.

Существует два варианта решения этой проблемы.

1) Повторное связывание функциональности JS после замены содержимого.

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

2) Использовать всплывающее окно событий.

Большинство событий вызываются не только в элементе, где они происходят. Они также призваны на всех своих предков через весь DOM. Таким образом, вы можете привязать событие не напрямую к элементу <a>, а к некоторому предку, который не будет заменен обновлением. Используя jquery, вы можете легко это сделать, используя on(event, selector, handler), например:

$('.replace').click(function() {
    $('.clickme1').replaceWith('<a href="#" class="clickme1">Replaced - 1</a>');
    $('.clickme2').replaceWith('<a href="#" class="clickme2">Replaced - 2</a>');
});
//this is usual binding
$('.clickme1').click(function(event) {
    alert('clickme1 clicked');
    event.preventDefault();
});
//this uses bubbling
$('.wrapper').on('click', '.clickme2', function() { 
    alert('clickme2 clicked');
    event.preventDefault();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <a href="#" class="clickme1">Click me - 1</a><br>
  <a href="#" class="clickme2">Click me - 2</a>
</div>
<br>
<a href="#" class="replace">Replace links</a>