Question

我在我的项目中使用 jQuery 1.9.1 。我关注HTML：

<button type="button" id="btn_add" class="btn btn-primary">Add</button>
<a class="btn_delete" href="#"><i class="icon-trash"></i></a>

如果用户点击带有类＆＃34; btn_delete＆＃34;的锚标记中的图标，我想显示相同的警报消息或点击ID为＃34; btn_add＆＃34;。

的按钮

为此，我尝试了以下代码，但它并没有为我做好准备。

$(document).ready(function() {
  $("button#btn_add.btn_delete").on("click", function(event) { 
    event.preventDefault();
    alert("This action has been temporarily disabled!")
  });
});

有人可以帮我这方面吗？

如果您想了解有关我面临的问题的更多信息，请告知我们。

提前致谢。

Answer 1

   **Approach #1**
   function doSomething(){
    //your code
   }

   $('#btn_add').click(doSomething);
   $('.btn_delete').click(doSomething);

   **Approach #2**
   $("#btn_add,a.btn_delete").on("click", function(event) { 
      event.preventDefault();
      alert("This action has been temporarily disabled!")
   });

Answer 2

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>

 $(document).ready(function() {
 $("button#btn_add, a.btn_delete").on("click", function(event) { 
 event.preventDefault();
  alert("This action has been temporarily disabled!")
});
});

</script>

Answer 3

您的代码非常接近应有的代码。变化：

$("button#btn_add.btn_delete")

要：

$("#btn_add,a.btn_delete")

Answer 4

您可以使用,来拥有多个选择器。

$(".btn_delete i,#btn_add").on("click", function(event) {
    event.preventDefault();
    alert("This action has been temporarily disabled!")
});

Answer 5

您可以在jQuery选择器中同时使用HTML标记，如下所示：

$(document).ready(function() {
  $("button#btn_add, a.btn_delete").on("click", function(event) { 
    event.preventDefault();
    alert("This action has been temporarily disabled!")
  });
});

希望这有帮助！

Answer 6

$(document).ready(function() {
    $("#btn_add,.btn_delete").on("click", function(event) { 
        event.preventDefault();
        alert("This action has been temporarily disabled!")
   });
});

Answer 7

除了其他答案：

您当前的选择器会找到如下元素：

<button id="btn_add" class="btn_delete">Foo</button>

如何在jQuery中同时使用click事件进行锚标记和按钮标记？

7 个答案: