Question

单击div时，它会使用AJAX从其他网页中提取html。但是如何在不使用内联js的情况下点击新页面上的div。

第一页：

<div id='clickToLoad'>Click Here</div>
<br />
<div id='localContentHere'></div>


<script>

document.getElementById('clickToLoad').onclick = function () {

    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'ajax/content.html', true);
    xhr.responseType = 'text';
    xhr.onload = function(e) {
      if (this.status == 200) {
            document.getElementById('localContentHere').innerHTML = this.response;
        }
    };
    xhr.send(); 
}

document.getElementById('loadMoreContent').onclick = function () {

    alert('This is some more content');

}

</script>

AJAX / content.html：

This is Some content
<br /><br />

<div id='loadMoreContent'>Load Even More Content</div>

我知道在加载JS时页面上没有div，因此没有意识到该div现在应该有一个click事件。我显然可以添加内联onclick或使用jQuery，但我不想做其中任何一个。

由于

Answer 1

你可以像jQuery一样进行委托

document.addEventListener('click', function(event) {
    var el = event.target;
    do {
        if (el.id === 'loadMoreContent') {

            alert('This is some more content');

        }
    } while (el = el.parentNode);
}, false);

FIDDLE

如何在没有查询的情况下加载xhr后使用click事件

1 个答案: