javascript-更改element.innerHTML之后,MooTools事件侦听器消失

2023-01-07 17:42:00

我正在尝试使用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); ?>

解决方法:

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

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

如果您有多个< a>链接,则只需要委派这些链接的特定子集,添加一个类或其他属性来区分它们.您几乎可以在relay(..)内使用任何选择器.假设所有链接都添加了一个class updateTrigger：

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

语法将是：

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

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

码农公寓

相关文章