YII2如何将Ajax函数持久化到GridView中？

Question

每个成功地在网格行中创建ajax函数的人，即从某个单元格的按钮或链接中。这个效果很好。

但是，在使用Ajax更新网格之后，无论是排序还是筛选，这些函数都不再执行。从YII1.x开始，我就一直在观察这个问题。

第三方库(如kartik \ editColumn )也是如此。它们只是第一次工作，在网格“重新加载”之后，它们就不再工作了。这不对吗？

Answer 1

当您将JS功能绑定到这些链接时，您可以将它们绑定到DOM中的元素，这些元素在进行绑定时就会出现。这通常是在页面加载期间构建DOM的时候。

ajax请求完成后，那些具有绑定JS功能的元素将被替换为新元素，但JS功能不会绑定到这些新元素。这就是为什么更新后JS“停止”工作的原因。

如何处理这一问题有两种选择。

1)替换内容后重新绑定JS功能。

您可以将绑定放到某个函数，然后在页面准备就绪和替换html内容之后调用该函数。

2)使用事件冒泡.

大多数事件不仅仅是在它们发生的元素上调用的。它们还通过整个DOM在其所有祖先上被调用。因此，您可以不直接将事件绑定到<a>元素，而是绑定到某些不能用update替换的祖先。使用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>

​