Question

我正在尝试获取订阅的按钮点击事件数组，然后通过从属性中提取位置来重定向。我无法让它工作，现在已经归结为以下......

function pushButton() {
    window.alert('Hello World');
}

var listButtons = document.getElementsByClassName('btn');

for (var i = 0; i < listButtons.length; i++) {
    listButtons[i].addEventListener('click', pushButton, false);
}

这是在页面底部的脚本标签中（在声明按钮之后）。

我也试过......

...
for (var i = 0; i < listButtons.length; i++)
    listButtons[i].onclick = function(i) {
        return function() {
            alert('Hello World');
        }
    }(i);
}

和...

...
(function(i) {
    listButtons[i].onclick = (function() {
        window.alert('Hello World');
})})(i);

基于我见过的其他例子。问题是单击按钮时没有任何反应。我在Chrome中使用了开发人员视图来查找错误，但它没有显示任何错误。我也试过Firefox和IE无济于事。

我确实有几个示例可以使用onclick触发所有事件，我得知它是由于订阅时触发的事件。但即使在那之后，按钮也没有做任何事情。我正在使用onclick但现在我已经转移到addEventListener，它没有不同的结果。

我正在尝试避免使用jQuery并使用vanilla javascript。

Answer 1

我试图复制你的第一个代码示例并让它像这样工作：

function pushButton() {
    alert('Hello World');
}

listButtons = document.getElementsByClassName('btn')

for (var i = 0; i < listButtons.length; i++) {
    listButtons[i].addEventListener('click', pushButton);
}

Answer 2

你的代码在我的电脑上工作正常，fllow是我的代码。

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title></title>
    </head>
    <body>
      <div>
        <input type="submit" class="btn" value="btn1"></input> 
        <form>
            <input type="text"></input> 
            <input type="text"></input> 
            <input type="submit" class="btn" value="btn2"></input> 
            <input type="submit" class="btn" value="btn3"></input> 
       </form>  
      </div>
    </body>
    <script type='text/javascript'>
        function pushButton() {
            window.alert('Hello World');
        }

        var listButtons = document.getElementsByClassName('btn');

        for (var i = 0; i < listButtons.length; i++) {
            listButtons[i].addEventListener('click', pushButton, false);
        }
    </script>
</html>

Answer 3

为了消除所有可能的原因，我开始删除所有javascript函数和事件以缩小范围。

事实证明，问题是由body onload事件中调用的函数引起的。此函数通过操纵包含div的innerHTML来更改按钮的位置。当innerHTML被重写时，它会破坏所有事件监听器。

这导致没有事件侦听器，也没有出现错误症状。修改onload事件后，原始代码工作正常，以便再次添加事件侦听器。

Answer 4

如果你把JavaScript包含在正文之前（在头部）它就不会工作。绑定在DOM准备好之前发生。

如果你把JavaScript放在页面底部就好了。

另一项工作是使用jQuery document ready

$(document).ready(function(){
    $('.btn').on('click',function(){
        alert('Hellow World');
    });

});

onclick事件未触发或未使用循环中的按钮进行订阅

4 个答案: