Question

我正在撰写Google Chrome扩展程序。

我有一个包含以下内容的options.html：

<html>
<head>
    <title>Test Options Menu</title>
    <script src="chromeoptions.js"></script>
</head>
<body>

<div id="options">
    <div id="form">
        <input type="checkbox" id="test">
        <div id ="testEvents" style="display:'none'">
            blabla
        </div>
    </div>
</div>
</body>
</html>

Chromeoptions.js中有这个：

function clicked(string) {
    console.log('clicked');
    if (document.getElementById(string).checked == true) {
        document.getElementById(string + 'Events').style.display = '';
    }
    else document.getElementById(string + 'Events').style.display = 'none';

}
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('test').addEventListener('click', clicked('test'));
});

发生的事情是：在第一次加载时，'click'事件处理程序触发，导致div'testEvents'消失。之后，当我切换复选框时没有任何反应。事件处理程序不会触发。如果我使用'click'或'onchange'就无所谓了。

我还尝试将脚本标签移动到html的底部，并将'click'事件处理程序放在'DOMContentLoaded'eventHandler之外，但这也没有改变任何东西。

那么当我切换复选框时，如何触发事件处理程序呢？

Answer 1

addEventListener的第二个参数必须是函数。您正在立即调用clicked()，而不是传递调用它的函数。

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('test').addEventListener('click', function() {clicked('test')});
});

Answer 2

你有

<div id ="testEvents" style="display:'none'">

也许试试：

<div id ="testEvents" style="display:none">

Answer 3

或者如果你想让它使用jquery：

添加：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

并使用：

$.fn.toggleDiv = function () {

        $(this).each(function () {

            var target = $(this);

            $(target).on('click', function () {
                $('#' + $(target).attr('id') + 'Events').toggle($(target).is(':checked'));
            });
        });
    };

$('input[type=checkbox]').toggleDiv();

适用于多个事件复选框：

<div id="options">
    <div id="form">
        <input type="checkbox" id="test">
        <div id ="testEvents" style="display:none">
            blabla1
        </div>

        <input type="checkbox" id="test2">
        <div id ="test2Events" style="display:none">
            blabla2
        </div>
    </div>
</div>

Chrome：eventHandler（'click'，function）不适用于复选框

3 个答案: