YII2 如何将 persistents Ajax 函数放入 GridView？

Question

每个人都设法在网格行中实现了 ajax 功能；也就是说，来自某个单元格的按钮或 link。这很好用。但是，在使用 Ajax 更新网格后；排序或过滤；这些功能不再执行。我从 Yii 1.x 开始就一直在观察这个问题。 kartik\editColumn 等第三方库也是如此。他们只在第一次工作，在 Grid "reloads" 之后，他们不再工作。错了吗？

Answer 1

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

在您的 ajax 请求完成后，那些具有绑定 JS 功能的元素将替换为新元素，但 JS 功能未绑定到这些新元素。这就是 JS "stops" 在更新后工作的原因。

有两种处理方法。

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>

YII2 如何将 persistents Ajax 函数放入 GridView？

YII2 How I do persistents Ajax Functions into GridView?

ajax

gridview

yii2