Question

我试图让事情变得简单，但似乎无法在点击事件后运行JS函数。

相关的HTML和JS：

＆＃13;

function addSite() {
  alert("DO SOMETHING");
}

＆＃13;

<div id="whitelist" class="row-fluid">
  <div class="span12">
    <p>Enter the sites you use to work:</p>
    <form action="">
      <input class="input-mini" type="text" id="add-site" />
      <input type="submit" onclick="addSite" />
    </form>
    <p>Your Whitelist:</p>
    <div id="show-sites"></div>
  </div>
</div>

＆＃13;

完整的HTML和JS here以及here。

Answer 1

function addSite()
{
    alert("DO SOMETHING");
}

<div id="whitelist" class="row-fluid">
        <div class="span12">
            <p>Enter the sites you use to work:</p>
            <form action="">
                <input class="input-mini" type="text" id="add-site" />
                <input type="submit" onclick="addSite()" />
            </form>
            <p>Your Whitelist:</p>
            <div id="show-sites"></div>
        </div>
    </div>

你需要在调用函数时包含括号，这在你的html中是不存在的。

Answer 2

应该是

onclick="addSite()"

而不是

onclick="addSite"

编辑：

正如@wOxxOm指出的那样，在使用chrome扩展时，不应使用onclick属性来触发事件。而是使用addEventListener将事件侦听器绑定到该特定DOM元素。

function addSite() {
  alert("DO SOMETHING");
}

<div id="whitelist" class="row-fluid">
  <div class="span12">
    <p>Enter the sites you use to work:</p>
    <form>
      <input class="input-mini" type="text" id="add-site" />
      <input type="submit" onclick="addSite()" />
    </form>
    <p>Your Whitelist:</p>
    <div id="show-sites"></div>
  </div>
</div>

由于您已将action属性设置为空字符串，请阅读：

在HTML5中，您实际上可以在提交按钮本身上指定一个操作。如果没有，则使用表单的操作，如果未设置，则默认为空字符串（请注意，您无法在HTML5中将操作显式设置为空字符串。）

参考：Is action really required on forms?

HTML提交onclick不会在chrome扩展名中触发

2 个答案: