javascript - 单击监听器以 ajax 加载内容。纯javascript

Question

我有这个 javascript，它通过 ajax 加载了一些内容 block

var sendContainer = document.getElementById("loadForm");

        sendContainer.addEventListener("click", function (event) {

      var xmlhttp;
            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            }
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

        // Show loaded content block in result div
                    document.getElementById("result").innerHTML = xmlhttp.responseText;

                }
            };
            var form = document.getElementById('ajax_send_message');
            var formData = new FormData(form);

            xmlhttp.open("GET", '/ajax', true);
            xmlhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");
            xmlhttp.send(formData);
 });

并加载内容 block

<button type="button" id="ajax_submit"">Send</button>

如何强制此 addEventListener 从动态加载的 block 中获取 id (ajax_submit)

document.getElementById("ajax_submit").addEventListener("click", function (event) {
alert('WORK!');

});

Answer 1

只需在 XMLHttpRequest() 的 onreadystatechange 事件监听器内添加该行即可。

像这样

var sendContainer = document.getElementById("loadForm");

    sendContainer.addEventListener("click", function (event) {

  var xmlhttp;
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

    // Show loaded content block in result div
                document.getElementById("result").innerHTML = xmlhttp.responseText;
                 document.getElementById("ajax_submit").addEventListener("click", function (event) {
                 alert('WORK!');
                });

            }
        };
        var form = document.getElementById('ajax_send_message');
        var formData = new FormData(form);

        xmlhttp.open("GET", '/ajax', true);
        xmlhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");
        xmlhttp.send(formData);
 });