Laravel livewire click 在 pjax 重新加载容器后不执行

Question

我在我的应用程序中使用 pjax。最近我添加了 livewire，但我不知道如何让它们一起工作。我的问题：

我有一个包含产品的网格，单击按钮时会无限滚动，这会调用特定的 URL 数据。

<div>
    <button wire:click="loadMore" class="bg-blue-500">Show more</button>
</div>

一切正常，我点击了一些过滤器（例如“按顺序排序”）。我的容器重新加载（使用 pjax），当我点击“显示更多”按钮时，它没有调用任何东西。

这是我的主要布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    @livewireStyles
</head>
<body>
<div id="pjax-container">
    <!--  THIS CONTENT RELOADS  -->
    <!--  Here I have foreach with data and button "Show more"  -->
</div>
</body>

@livewireScripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>

<script>
    $(document).pjax("a", '#pjax-container');
</script>

</html>

我不知道哪里会出问题。感谢您的帮助。

Answer 1

尝试添加脚本 jquery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Answer 2

我终于找到了解决办法。

您必须在 pjax 结束后使用此命令重新扫描所有 livewire 组件：

window.livewire.rescan()

Laravel livewire click 在 pjax 重新加载容器后不执行

Laravel livewire click is not executing after pjax realoded container

javascript

ajax

laravel

laravel-livewire

pjax