javascript-更改element.innerHTML之后,MooTools事件侦听器消失
作者:互联网
我正在尝试使用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