Question

在我看的网页上，有很多数据是异步加载的。

该数据包含一个名为“查看更多”的按钮。如果您单击按钮或只是向右滚动到底部，将通过“GET”调用功能加载更多数据。

当我尝试使用它时（在FireBug控制台中）：

document.getElementById('#button9').click();

或

document.getElementById('button9').click();

我得到了这个结果：

TypeError：document.getElementById（...）为null

的document.getElementById（ '＃按钮9'）上单击（）;

从我读到的有关此TypeError的内容中，无法检测到Id，我认为这是因为数据是异步的。有没有办法检测元素（它没有显示在“页面源”上，但是当我点击“使用FireBug检查元素”时它就在那里？）

我想检测元素，然后调用点击事件来“模拟点击”（意思是我想点击一下而不点击按钮或向右滚动），输出显示在浏览器中（按照惯例）。

Answer 1

This will work, no matter even if you don't know when the object is getting created and added to the DOM 

//chrome / ff /IE
$("#button9").bind("DOMSubtreeModified", function() {
    // Add click function here
});     


//IE 8 and lower 
$("#button9").bind("propertychange", function() {
   //Add click function here
});

第二个选项 * OR * 不确定它是否支持IE8，但它肯定支持所有其他

    document.addEventListener("DOMSubtreeModified", function (e) {
        if ($(e.target.id) == "#button9") {
            // Do stuff
        }
    }, false)

说明：它检查DOM是否找到了具有特定ID的元素，如果是，则执行click函数。

Answer 2

如果您只想附加活动，那么底部就可以了。

如果问题是它为空，并且您不知道它何时会出现，那么最好的办法是创建一个循环，直到它存在。

var obj = document.getElementById('button9');
obj.addEventListener('click', function() {
 alert(' you clicked on ' + this);
}, false);

如果它是第二个实例，并且你想等到对象事件，那么使用：

checkExists(); 

function checkExists() {
    var obj = document.getElementById('button9');
    if (obj != null) {
        obj.addEventListener('click', function() {
             alert(' you clicked on ' + this);
        }, false);
        alert('added event');
    }
    else {
        setTimeout(checkExists, 1000);
    }
}

检测异步加载的按钮

2 个答案: