Question

我正在使用jquery 3.3.1，当我尝试在类上使用onclick事件显示某些数据时，它无法触发代码，但是当我使用id时，它会触发。

下面是我的代码。

不起作用

$(document).on('click', '.toggle', function () {
  alert('yes');
});

工作

$(document).on('click', '#toggle', function () {
  alert('yes');
});

Answer 1

如果您的HTML包含与#toggle和/或.toggle选择器匹配的元素，您应该找到脚本。

请注意，.toggle是class selector，这意味着您需要在HTML中的class="toggle"行中包含一个带有class属性的元素，以用于第一个脚本片段工作：

<button class="toggle">With Class</button>

有关这两种情况的工作示例，请参见下面的代码段：

$(document).on('click', '.toggle', function () {
  alert('works with class');
});

$(document).on('click', '#toggle', function () {
  alert('works with id');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- id attribute requires "#toggle" selector -->
<button id="toggle">With ID</button>

<!-- class attribute required ".toggle" selector -->
<button class="toggle">With Class</button>

如果仍然遇到问题，请确保浏览器没有报告其他脚本错误，并且已成功加载jQuery（和其他依赖项）。

Answer 2

将事件处理程序绑定到“ click” JavaScript事件，或在元素上触发该事件。

<!-- id attribute  -->
<button id="btnID"> BUTTON BY ID</button>

<!-- class attribute  -->
<button class="btnCLASS">BUTTON BY CLASS</button>


$(document).ready(function() {


     $("#btnID").click(function(event){ 

        });


     $(".btnCLASS").click(function(event){ 

     });

} );

Answer 3

您也可以更具体地单击，以防万一动态添加类或ID，以后可能不会引起任何问题。

$(document).on('click', 'a.toggle', function () {
  alert('works with class');
});

$(document).on('click', 'a#toggle', function () {
  alert('works with id');
});

如果您有多个切换类别，则只有具有class或id作为切换的Anchor标签会得到响应。希望对您有所帮助。谢谢

jQuery单击事件无法使用类

3 个答案: