Question

我在AJAX和Unobtrusive JavaScript面对非常奇怪的事情我有两页

ajaxcontent.php
的index.php

index.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只有

<input type="button" id="b"/>

问题是不引人注意的Javascript无法正常工作。当我点击按钮后，当ajaxcontent被取消后，它不会显示警告弹出窗口。我试过，我添加了

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

这个代码在ajaxcontent.php上但它仍然无效。只有这样才能让它工作，我必须添加内联JavaScript作为

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

并用

替换此功能

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

带

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

所以请帮助我，如何在这里使用不显眼的js，请不要给基于jQuery的答案谢谢

Answer 1

首先，document.getElementById('b')只能在您调用此函数时找到DOM中的元素。

由于id为b的元素位于click事件中请求的数据中，因此该函数将找不到任何元素。您很可能应该在控制台中看到错误cannot set property onclick of undefined。

默认情况下，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
  });
}

Answer 2

当触发函数时，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并执行它，否则不会执行该代码。我这样做的方法是，将我的javascript放在AJAX请求的页面中，输入类为'ajax-js'，并扫描这些输入框并逐个执行代码，然后删除该类。

不引人注目的javascript无法使用AJAX加载的内容

2 个答案: