javascript - 尝试选择对象并使用js添加点击事件时收到错误

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-listDOM 中，因此document.querySelector('#img-list ul.grid')找不到任何东西。

既然你的问题是用jquery标记的，你为什么不使用它呢？

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

这将延迟运行 JavaScript，直到 DOM 准备好。