Question

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

说明

我有三个按钮。 myDiv外的两个按钮和myDiv内的一个按钮单击任何这些按钮即可启动AJAX请求（将button变量传递给“button.php”）并根据响应文本更新myDiv内容。
因此，更新后，myDiv会显示Button3链接+显示已点击哪个按钮的消息。

问题：

一切似乎都运行正常，但经过几次点击后，myDiv显示loader.gif图像并停止。在此之后，如果我等了一会儿，浏览器有时会停止工作（被阻止）我注意到了IE6的这个问题。

有人能说出这个问题意味着什么，是否可以避免？

的index.html

<html>
<head>
<script type="text/javascript" src="mootools/mootools-1.2.4-core-nc.js"></script>
<script type="text/javascript" src="mootools/mootools-1.2.4.4-more.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
  $("myPage").addEvent("click:relay(a)", function(e) {
    e.stop();
    var myRequest = new Request({
      method: 'post',
      url: 'button.php',
      data: {
        button : this.get('id'), test : 'test'
      },
      onRequest: function() {
        $('myDiv').innerHTML = '<img src="images/loader.gif" />';
      },
      onComplete: function(response) {
        $('myDiv').innerHTML = response;
      }
    });
    myRequest.send();
  });
});
</script>
</head>
<body>
<div id="myPage">
  <a href="#" id="button1">Button1</a> 
  <a href="#" id="button2">Button2</a> 
  <div id="myDiv">
    <a href="#" id="button3">Button3</a>
  </div>
</div>
</body>
</html>

button.php

<a href="#" id="button3">Button3</a>
<br><br>
<?php echo 'You clicked ['.$_REQUEST['button'].']'; ?>

Answer 1

嗯，代码本身并没有错。以下是您可以尝试做的事情：

使用onSuccess代替 onComplete和console.log 回复 - 检查是否有一些可疑的事情。也许你在某些时候得到了一个错误的反应，导致IE上的JS错误（不是试图在内联中注入一个块元素，或者一些非语义上的奇怪？）
以防使用el.set('html', response)代替el.innerHTML
检查Element.Delegation是否在某些时候没有丢失
在http://jsfiddle.net上创建一个工作示例，以便我们可以查看代码并进行更多调试。

Answer 2

http://www.jsfiddle.net/dimitar/VZuGz/

工作正常 - 请注意我添加了一个存储点击状态的布尔值 - 它只允许一次处理1个ajax请求，以防出现问题（排队请求）。

在某种程度上，这是同步的同步。如果必须记录每次点击，无论多快，都可以使用http://mootools.net/docs/more/Request/Request.Queue但禁用正在中继的元素的输出（可点击）。

P.S。我最近写了一个关于mootools热图记录的课程 - 这与你的工作类似，请告诉我你是否会朝着这个方向前进，我很乐意分享代码。

(function() {
    var clicked = false;    
    $("myPage").addEvent("click:relay(a)", function(e) {
        e.stop();
        if (clicked)
            return; // do 1 ajax at a time.

        new Request.HTML({
            method: 'POST',
            url: '/ajax_html_echo/',
            data: {
                button : this.get('id'), test : 'test',
                html: '<a href="#" id="button3">Button3</a><br><br>You clicked id ' + this.get("id")
            },
            onRequest: function() {
                $('myDiv').set("html", 'loading...');
                clicked = true;
            },
            onComplete: function() {
                $('myDiv').set("html", this.response.text);
                clicked = false;
            }
        }).send();
    });
})();

MooTools请求失败

2 个答案: