嘗試選擇對象並使用js添加click事件時收到錯誤

Question

不斷收到錯誤

 "--
[18:37:08.353] Use of Mutation Events is deprecated. Use MutationObserver instead. @ chrome://firebug/content/chrome/tabContext.js:589"

和

"[18:37:10.710] TypeError: myNode is null @ http://site.com/image:89"

我正在使用Ruby on Rails，webBrick和FireFox。

進行此設置，以查看單擊“ ...上面收到的錯誤”后是否可以在控制台中顯示任何內容。

<script>

(function() {
    var myNode = document.querySelector('#img-list ul.grid');

    myNode.addEventListener("click", function(e) { 
        console.log(e);
    }, false);

})();

</script>

<style>

li {
    display:inline-block;
    width:150px;
    height:auto;
    padding: 10px 10px 10px 10px;   
}

#img-list {
    width:330px;
}

</style>


<div id="img-list">
    <ul class="grid">
        <li><img src="assets/1/1_1.png"></li>
        <li><img src="assets/1/1_2.png"></li>
        <li><img src="assets/1/1_3.png"></li>
        <li><img src="assets/1/1_4.png"></li>
    </ul>
</div>

Answer 1

當您的<script>在瀏覽器看到時執行，並且發生在#img-list在DOM中之前，因此document.querySelector('#img-list ul.grid')找不到任何內容。

由於您的問題是用jquery標記的，為什么不使用它呢？

$(function() {
    $('#img-list ul.grid').click(function(e) {
        console.log(e);
    });
});

這將延遲您的JavaScript的運行，直到DOM准備就緒為止。