自定义事件上的 Htmx

问题描述 投票：0回答：2

我尝试使用 htmx 触发器和自定义事件，但没有成功。我使用自定义事件是因为我将在页面中触发多次刷新。我的来源很简单，但我无法使其工作：

<html>
<script src="./js/htmx.min.js"></script>
<body>

<div id="detailDiv" hx-trigger="startProcessing" hx-get="/api/messages.php">GO</div>
<script>
document.addEventListener("startProcessing", () => {
    console.log("The startProcessing event was triggered")
});
htmx.trigger('#detailDiv','startProcessing')
</script>
</body>
</html>

HTMX 永远不会被触发，messages.php 永远不会被调用，而 javascript eventListener 会被正确触发。我不懂为什么。您能发布一个完整的 htmx 响应 javascript 自定义事件的示例吗？

我花了很多时间试图找出问题所在。

javascript ajax events triggers htmx
2个回答
0
投票

欢迎来到SO。

您的代码可以工作，但我猜当触发事件时（当 

#detailDiv
标签加载时立即），HTMX 尚未处理 
<script>
。尝试在触发事件之前等待页面完全加载，如以下小提琴所示：https://jsfiddle.net/nyh8dtaj/（在控制台中查看运行小提琴时如何发送请求）

document.addEventListener('DOMContentLoaded', () => {
    htmx.trigger('#detailDiv', 'startProcessing');
});
0
投票

确保 DOM 和 HTMX 都已完全加载，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>

<div id="detailDiv" hx-trigger="startProcessing" hx-get="/api/messages.php">GO</div>

<script>
    document.addEventListener('DOMContentLoaded', (event) => {
        document.addEventListener("startProcessing", () => {
            console.log("The startProcessing event was triggered");
        });

        htmx.onLoad(function() {
            htmx.trigger('#detailDiv', 'startProcessing');
        });
    });
</script>

</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.