我正在尝试使用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>的点击,甚至是动态点击.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。