不引人注目的javascript不能处理AJAX加载的内容

我在使用

AJAX

和

不引人注目的JavaScript

时遇到了非常奇怪的事情，我有两个页面

• ajaxcontent.php
• index.php

php已经

<div id="cont"></div>
<input type="button" id="a" value="load plz.">

<script type="text/javascript">
    document.getElementById('a').onclick = function  () {
        if (window.XMLHttpRequest) {
            ari = new XMLHttpRequest();
        } else {
            ari = new ActiveXObject("Microsoft.XMLHTTP")
        }

        ari.onreadystatechange = function () {
            if (ari.readyState == 4 && ari.status == 200) {
                document.getElementById('cont').innerHTML = ari.responseText;

            }
        }

        ari.open("GET","button.php",true);
        ari.send();
    }
    document.getElementById('b').onclick = function  () {
        alert('a');
    }
</script>

这段代码在ajaxcontent.php上运行，但仍然无法运行。 唯一能让它工作的方法是，我必须将内联javascript添加为

<input type="button" id="b" onclick="hi();"/>

与

---

因此，请帮助我如何在这里使用低调的js，请不要给出基于jQuery的答案。首先，感谢

文档。getElementById（'b'）

在调用此函数时只能找到DOM中的元素

由于id为

b

的元素位于您在单击事件中请求的数据中，因此函数将找不到任何元素。您很可能在控制台中看到了错误，如单击未定义的

时无法设置属性

默认情况下，AJAX请求是异步的（您不应该使它们同步，因为这会阻塞浏览器的窗口）

因此，您需要将
document.getElementById（'b'）.onclick=…
放在
onreadystatechange
复选框中的
document.getElementById（'cont'）.innerHTML=ari.responseText

下面是一个简单的示例，说明如何概括您的请求：

function doAjaxRequest(url, complete, error) {
  var ari; //<<<< you should define your variables using var otherwise it is set in the global scope
  if (window.XMLHttpRequest) {
    ari = new XMLHttpRequest();
  } else {
    ari = new ActiveXObject('Microsoft.XMLHTTP');
  }

  ari.onreadystatechange = function() {
    if (ari.readyState === 4) {

      if (ari.status === 200) {
        // if complete callback is passed, then call it if request was successful
        if (typeof complete === 'function') {
          complete(ari.responseText);
        }
      } else {
        // if error callback is passed then call it if request was not successful
        if (typeof error === 'function') {
          error(ari.status, ari.statusText);
        }
      }

    }
  }

  ari.open('GET', url, true);
  ari.send(null);
}

document.getElementById('a').onclick = function() {
  doAjaxRequest('button.php', function( data ) {

    document.getElementById('cont').innerHTML = data;

    document.getElementById('b').onclick = function() {
      alert('a');
    }

  }, function(errorCode, errorMessage) {
    //do something on error
  });
}

函数请求（url，完成，错误）{
var ari；//触发函数时，onclick事件会附加到DOM中当前的元素。因为ajaxcontent.php中的按钮是在调用函数后添加到DOM中的，所以不会附加任何事件

要纠正这一点，您可以在ari.onreadystatechange中添加一个代码段以删除事件，然后再次附加该事件

ari.onreadystatechange = function () {
        if (ari.readyState == 4 && ari.status == 200) {
            document.getElementById('cont').innerHTML = ari.responseText;
            // remove events
            document.getElementById('b').onclick = null;
            // attach events 
            document.getElementById('b').onclick = function() {
                   alert('a');
            }
        }
    }

删除事件很重要，因为它可能会导致重复执行（尽管我在错误学习时使用了jQuery）

如果在ajaxcontent.php中添加javascript代码，除非扩展ari.onreadystatechange函数以扫描javascript并执行它，否则不会执行该代码。我这样做的方式是，将AJAX请求页面中的javascript放入类为“AJAX js”的输入中，扫描这些输入框并逐个执行代码，删除随我去上课。
谢谢：）我知道了，你的答案很清楚，很简单：）你能给我一些其他的方法吗？？plz@Null其他方法是什么意思？用于附加事件侦听器，用于处理AJAX？处理AJAX！因为我不想将代码放在…responseText之后，但仍然想使用不引人注目的JavaScript？@Null您需要将其放在
responseText
后面，否则
document.getElementById（'a'）后面
找不到该元素。另一种解决方案是收听
单击
，例如
正文
，并在冒泡阶段捕获
单击
事件，检查事件源是否具有id
a
，并在那里处理事件（这称为委派）。但您可以概括您请求数据的方式，以便可以重复使用。我在回答中添加了一个示例（示例应该有效，但我需要指出的是，我没有时间测试它）
document.getElementById（'b'））.onclick=null
不会删除jQuery注册的回调，因为jQuery使用
addEventListener
/
removeEventListener
，幸运的是，这不受使用旧的附加事件侦听器方法的代码的影响。如果要删除使用
添加的回调，只需使用
.onclick=null；
>.onclick=callback；
之前。如果您想替换这样的回调，只需编写
。onclick=callback；
就足够了。您不需要先删除它。@t.niese当我提到jQuery时，我刚才使用.on（'click'，函数）处理程序进行测试。该原则适用于所有处理程序。（编辑：当然假设使用的是同一个侦听器）
.on（'click'，function）
内部使用
addEventListener
/
attachEvent
（对于较旧的IE），因此
.onclick=null；
对附加了
.on（'click'，function）
的回调没有影响。因此，
.on[事件]=function
始终只能保存一个回调函数您可以删除示例代码中的行
document.getElementById（'b'）。onclick=null；
，因为它没有效果，因为您在下一行覆盖它。您误解了，我没有将jQuery的
。on（事件，函数）组合起来
与vanilla
onclick=null；
一起使用。我只是在几周前提到了jQuery，以便在上次双重执行发生时完全自行决定使用什么。我觉得有必要提及它，因为这是一个与库无关的问题。我只想澄清一下，它误导了您的写作方式：）。在使用
元素的情况下。在[event]
上，删除以前添加的带有
元素的事件侦听器并不重要。在[event]
上，当您使用
元素添加新的侦听器时。在[event]
上，因为旧的侦听器刚刚被覆盖。有人可能会认为是
元素。在[event]=null；
由于
//remove events
而删除所有事件，但事实并非如此。对于
addEventListener
或
$（元素）。在（事件，…）
上，如您所说，跟踪是否已添加回调以防止双重附加/执行非常重要。
document.getElementById('b').onclick = function  () {
    alert('a');
}

function hi() {
    alert('a');
}

function doAjaxRequest(url, complete, error) {
  var ari; //<<<< you should define your variables using var otherwise it is set in the global scope
  if (window.XMLHttpRequest) {
    ari = new XMLHttpRequest();
  } else {
    ari = new ActiveXObject('Microsoft.XMLHTTP');
  }

  ari.onreadystatechange = function() {
    if (ari.readyState === 4) {

      if (ari.status === 200) {
        // if complete callback is passed, then call it if request was successful
        if (typeof complete === 'function') {
          complete(ari.responseText);
        }
      } else {
        // if error callback is passed then call it if request was not successful
        if (typeof error === 'function') {
          error(ari.status, ari.statusText);
        }
      }

    }
  }

  ari.open('GET', url, true);
  ari.send(null);
}

document.getElementById('a').onclick = function() {
  doAjaxRequest('button.php', function( data ) {

    document.getElementById('cont').innerHTML = data;

    document.getElementById('b').onclick = function() {
      alert('a');
    }

  }, function(errorCode, errorMessage) {
    //do something on error
  });
}

ari.onreadystatechange = function () {
        if (ari.readyState == 4 && ari.status == 200) {
            document.getElementById('cont').innerHTML = ari.responseText;
            // remove events
            document.getElementById('b').onclick = null;
            // attach events 
            document.getElementById('b').onclick = function() {
                   alert('a');
            }
        }
    }