0

我开始编写一些 javascript 代码来检测按钮按下。我一直在谷歌搜索所有不同的方法。当他们中的一些人在我的代码中工作或不工作时，我被难住了。

这是一个有 4 个示例的JS Fiddle。

有人可以解释为什么 #1 或 #4 不起作用吗？

这是html测试代码。

<input type ='button'  value = "Test Button 1" id="Test_Button1" >
<input type ='button'  value = "Test Button 2" id="Test_Button2" >
<input type ='button'  value = "Test Button 3" id="Test_Button3" >
<input type ='button'  value = "Test Button 4" id="Test_Button4" >

这是javascript代码

$('Test_Button1').click (function() {
    alert("Test Button 1 worked");
});


$(document).on("click","#Test_Button2", function() {
        alert("Test Button 2 worked");
});


document.getElementById('Test_Button3').onclick = function() {
        alert("Test Button 3 worked");
};


$(document).ready (function () {
        $('Test_Button4').click (function() {
            alert("Test Button 4 worked");
    });
});
4

5 回答 5

2

对于第一个，因为您将其称为id必须使用的元素#，所以

$('#Test_Button1').click(function() {
        alert("Test Button 1 worked");
});

最后一个也是一样的，你必须添加#.

http://jsfiddle.net/ez2SP/1/

于 2013-03-13T01:32:59.710 回答
1

假设您的 $ 是 jQuery，那么您缺少 #1 和 #4 中的 # 符号

于 2013-03-13T01:34:03.323 回答
1

#1 和 #4 寻找<Test_Button4>元素。要通过其属性获取元素id，您必须使用#：

#Test_Button4
于 2013-03-13T01:35:49.707 回答
0

对于#1，你需要一个#：

$('#Test_Button1').click (function() {
    alert("Test Button 1 worked");
});

＃4相同：

$('#Test_Button4').click (function() {
    alert("Test Button 4 worked");
});

jQuery 使用 CSS 样式的选择器，这意味着如果您通过 id 选择项目，请使用#. 如果您按班级选择它，请使用..

这里还有更多内容：http: //www.w3schools.com/jquery/jquery_ref_selectors.asp

于 2013-03-13T01:33:12.343 回答
0

正如已经指出的那样，您的某些代码是错误的，但我认为这只是为了举例。您需要使用$('#Test_Button1')（注意添加#）来访问带有 id 的按钮Test_Button1。

从技术上讲，有几种方法可以对元素事件做出反应，并且有理由使用其中的大多数。

这段代码：

$(document).on("click","#Test_Button2", function() {
        alert("Test Button 2 worked");
});

...正在通过 jQuery使用事件委托（读取）。基本上，不是将事件侦听器添加到每个单独的元素，而是将其添加到父元素（在本例中为文档本身）。因为事件冒泡（读取和读取），所以当您单击按钮时，事件最终会触发委托侦听器。如果您要在页面上添加或更改内容（例如使用 AJAX），这将非常有用。添加到页面的新元素将触发您的事件，而无需单独处理它们，因为侦听器实际上已附加到文档。

包装器中的代码document.ready（它本身就是一个事件监听器）将在 DOM 准备就绪时触发[ doc ]。其他代码将在文档加载时执行。您可以将任何内容包装在一个document.ready块中，它不代表离散方法。

您展示的几个示例是相同的。您可以使用on()添加委托，也可以使用click()-- 后者是前者的别名。您还将live()在野外的代码中找到已被on()更新版本替换的代码。

onclick是 HTML 元素的一个属性，它与将事件右内联相同：<button onclick="alert('do not do this');">Yay!</button>.

有关添加事件侦听器与使用元素属性之间的区别的完整细分，请参阅此答案onclick：addEventListener vs onclick

文档

于 2013-03-13T01:41:42.277 回答