Javascript 不'；本地js输入时的t工作单击事件

我有html标记

<div id="site">
<header id="masthead">
    <h1>Winery</h1>
</header>

<a href="cart.html" class="linkcart">Go to Shopping Cart <span></span></a>
<div id="content">
    <div id="products">
        <ul data-bind="foreach: products">
            <li >
                <div class="product-image">
                    <img data-bind="attr:{src: img}" alt="" />
                </div>
                <div class="product-description">
                    <h3 class="product-name"><span data-bind="text: name" /></h3>
                    <span class="product-id">ID <span data-bind="text: id" /></span></span>
                    <p class="product-price">&euro;  <span data-bind="text: price" /></p>
                    <label for="qty-1">Quantity</label>
                    <span class="down" ></span>
                    <input type="text" data-bind="value: qty" class="qty" />
                    <span class="up"></span><br>
                    <input type="submit" value="Add to cart" class="btn" id="add" />
                </div>
            </li>               
        </ul>
    </div>
    <div id="browser">

    </div>
</div>

如果通过属性html标记分配一个处理程序，它就可以工作

<input type="submit" value="Add to cart" class="btn" id="add"  onclick="addToBlock()"/>

---

在分配事件处理程序之前，请确保已加载文档：

window.onload = function() {
    document.getElementById('add').onclick = function() {
        document.getElementById('browser').remove();
    }
};

如果您使用

jQuery

，您可以让它比使用上述代码更早执行，因为它不会等待图像加载：

$(function() {
    $('#add').click(function () {
        $('#browser').remove();
    });
});

直接执行它，但通过移动文档底部的代码，比如在关闭

正文

标记后，在大多数情况下都会起作用，尽管我已经使用了深度嵌套的

DOM

层次结构，这可能会失败：

...
</body>
<script>
    document.getElementById('add').onclick = function() {
        document.getElementById('browser').remove();
    }
</script>
</html>

---

问题在于ID，我有几个元素具有相同的ID，onclick只对第一个元素起作用。我通过上课

//get all input by class
var buttons = document.getElementsByClassName('btn');
//add onclick to each
for (var i = 0; i < buttons.length; i++) {
    buttons[i].onclick = function() {

    }
}

//按类获取所有输入
var buttons=document.getElementsByClassName（'btn'）；
//将onclick添加到每个
对于（变量i=0；i

document.getElementById（'add'）.addEventListener（'click'，function（）{document.getElementById（'browser'）.remove（）；}）；你的浏览器元素在哪里？还有addToBlock（）函数？@damianocelent:如果OP的代码不起作用，那也不起作用。是的，最好与其他人（例如DOM2处理程序）友好相处，但旧的东西确实有效。控制台中有任何错误吗？请确保事件处理程序的分配发生在文档加载之后，例如在

window.onload=function（）{…}

window.onload

中是最糟糕的方式，因为只有在加载所有图像和其他辅助资源后才会发生这种情况。您能否在您的问题中提供更多的

html

，以便我们可以查看浏览器元素？根据您迄今为止提供的

窗口。onload

方法对我来说很有效，只是单击会出现一个错误，没有定义“browser”。经过编辑，现在您可以在底部看到browser元素，在包含main.js和event onclick之前，您在哪里关闭

标记？总之，我将您的代码放在了这里。我只在“browser”

div

中添加了一些文本。它是有效的。请检查一下。这把小提琴不适合你吗？

setTimeout(function() {
    document.getElementById('add').onclick = function() {
        document.getElementById('browser').remove();
    }
}, 0);

//get all input by class
var buttons = document.getElementsByClassName('btn');
//add onclick to each
for (var i = 0; i < buttons.length; i++) {
    buttons[i].onclick = function() {

    }
}