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

2019-12-10 03:47:37 阅读：272 来源： 互联网

我正在尝试使用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>的点击,甚至是动态点击.

标签：mootools,ajax,events,javascript
来源： https://codeday.me/bug/20191210/2098879.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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