Question

我有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>

我希望在本地js的输入上挂一个click事件，但是事件不能处理输入

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

如果通过属性html标签分配处理程序，它的工作原理

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

Answer 1

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

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

如果你使用jQuery，你可以比上面的代码更早地执行它，因为它不会等待加载图像：

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

直接执行它，但是移动文档底部的代码，就像在body标记结束后大多数情况下都会有效，尽管我已经有了深层嵌套的DOM层次结构这可能会失败：

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

如果您选择最后一个选项，但希望添加一些预防措施，但setTimeout中的代码有延迟0，这将使其以异步方式运行，从而允许DOM完全建成：

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

Answer 2

问题出现在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() {

    }
}

在本机js的输入上没有工作点击事件

2 个答案: