Question

我正在尝试使用MooTools来完成这项任务。

说明

我将一个事件监听器附加到myButton链接。单击此链接可启动AJAX请求并根据响应文本更新myDiv内容。

在此请求期间，POST变量被发送到“button.php”，但此时此时尚未使用..
（我希望稍后再使用）

好的，因此，myDiv获得具有相同ID（myButton）+随机数的完全相同的链接，以便我们可以看到每次点击都会生成新的数字。

问题：

首次点击myButton后，myDiv正确更新，显示随机数。当我第二次点击myButton时（这次是在新更新的div中），div不再刷新。

请注意，我需要myButton位于myDiv内，并且每次点击后都必须更新（刷新）myDiv，而无需刷新整个页面。

有人可以根据这个简化的代码示例向我展示如何实现此任务吗？

的index.html

<html>
<head>
<script type="text/javascript" src="mootools-1.2.4-core-nc.js"></script>
<script>
window.addEvent('domready', function() {
  $('myButton').addEvent('click', function(e) {
    e.stop();
    var myRequest = new Request({
      method: 'post',
      url: 'button.php',
      data: {
        action : 'test'
      },
      onRequest: function() {
        $('myDiv').innerHTML = '<img src="images/loading.gif" />';
      },
      onComplete: function(response) {
        $('myDiv').innerHTML = response;
      }
    });
    myRequest.send();
    $('myButton').removeEvent('click');
  });
});
</script>
</head>
<body>
  <div id="myDiv">
    <a id="myButton" href="#">Button</a>
  </div>
</body>
</html>

button.php

<a id="myButton" href="#">Button</a> clicked <?php echo rand(1,100); ?>

Answer 1

查看Element.Delegation一次在myDiv容器上设置事件，这样每次更新内容时都不必重新附加处理程序。您需要在脚本中包含此MooTools-More扩展，因为它不是核心的一部分，但将从1.3版开始。

$("myDiv").addEvent("click:relay(a)", function() {
    ...
);

如果您内部有多个<a>链接，并且您只想委派其中的特定子集，请添加一个类或其他属性以区分它们。您可以在relay(..)中使用几乎任何选择器。假设所有链接都添加了一个类updateTrigger：

<a class="updateTrigger" id="myButton" href="#">Button</a>

语法将是：

$("myDiv").addEvent("click:relay(a.updateTrigger)", function() {
    ...
});

请参阅此working example，其中每5秒更换一次链接。 myDiv容器上只有一个事件设置，它处理所有<a>的所有点击，甚至是动态点击。

Answer 2

您要将事件附加到要替换的元素。 dom无法知道对你而言，旧按钮和新按钮是相同的。删除旧按钮（以及带有它的事件监听器）并创建新按钮。因此，您需要将事件重新附加到新按钮。

那说：为什么按钮必须在div内？心灵难以置信。您始终可以从javascript更新按钮文本，无需替换它并继续创建新的侦听器对象。

更改element.innerHTML后，MooTools事件侦听器消失

2 个答案: