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

Question

每个设法在网格行内执行ajax函数的人；也就是说，通过某个单元格的按钮或链接。这很好。但是，在使用Ajax更新网格之后；进行分类或过滤；这些功能不再执行。从Yii 1.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>