jQuery中如何在多个元素被单击时触发事件？

Question

jQuery中如何在多个元素被单击时触发事件？

5

我有：

<div id="d1">
   <div id="d2"></div>
   <div id="d3"></div>
   <div id="d4"></div>
</div>

我希望您能够在单击上述任何元素时调用此函数。

function clickedele(){
    alert("Ele clicked");
}

我尝试了这些方法，但都没有起作用：

var mhele_1 = $('#d1');
var mhele_2 = $('#d2');
var mhele_3 = $('#d3');
var menu_ico =$('#d4');
$([menu_ico.get(0),mhele_1.get(0), mhele_2.get(0),mhele_3.get(0)]).on('click', function(){
    alert("Ele clicked");
});

或者

$('#menu_ico,#d1, #d2,#d3').on()

或者

$('#menu_ico').add('#d1').add('#d2').add('#d3').on()

但是没有一个起作用。

- Mr. Nobody

1

为什么不为所有内容使用一个类呢？ - guradio

7个回答

1

事件委托应该是要走的路。

$('#d1').on('click', clickFunc)

function clickFunc(e) {
  alert($(e.target).text())
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="d1">
  <div id="d2">1</div>
  <div id="d3">2</div>
  <div id="d4">3</div>
</div>

- th1rdey3

0

function clickedele() {
  console.log('clicked');
}
$('div[id^="d"]').on('click',clickedele);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="d1">
   <div id="d2"></div>
   <div id="d3"></div>
   <div id="d4"></div>
</div>

使用 $('div[id^="d"]') 来选取所有 id 以 d 开头的 div，也可以使用其他模式例如 $('#d1 > div[id^="d"]') 来选择 d1 div 中所有 id 以 d 开头的 div。

- Atul Sharma

0

$('.common').click(clickedele)

function clickedele() {
  alert("click from " + $(this).text())
  alert("Ele clicked");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="d1">
  <div id="d2" class="common">1</div>
  <div id="d3" class="common">2</div>
  <div id="d4" class="common">3</div>
</div>

为所有类添加共同的类。
使用类进行单击操作。

$('#d1 div').click(clickedele)

function clickedele() {
  alert("click from " + $(this).text())
  alert("Ele clicked");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="d1">
  <div id="d2" class="common">1</div>
  <div id="d3" class="common">2</div>
  <div id="d4" class="common">3</div>
</div>

使用父元素作为选择器，然后加上空格和 div，表示选择父元素的子元素，例如 $('#d1 div')。

- guradio

0

HTML：

<div id="d1">
   <div id="d2" onclick="isClicked(this)">d2</div>
   <div id="d3" onclick="isClicked(this)">d3</div>
   <div id="d4" onclick="isClicked(this)">34</div>
</div>

JavaScript：

function isClicked(obj){
   alert(obj.id);
}

https://jsfiddle.net/emilvr/dyzgcju5/

- Emad Dehnavi

0

你可以给子div一个共同的类。假设类名为childDiv。然后你可以处理div的点击事件。

$(".childDiv").on("click",function(){
    alert("Ele clicked");
})

- Abhijit

-2

最好使用循环来实现这个功能：

$('#d1 > div').each(function(){
 $(this).click(function(){
    alert("Ele clicked");
 });
});

- Sander Meijer

不，当你可以使用$('#d1 > div').on("click",function(){ alert("Ele clicked"); });时，循环并不是更好的选择 - 顺便提一下，它还漏掉了d1。 - mplungjan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pranav C Balan · Accepted Answer

您的选择器#menu_ico没有指向元素，元素ID为d1，d2和d3，请合并ID选择器并绑定单击事件处理程序。

$('#d2,#d3,#d4').on('click', function(){
    alert("Ele clicked");
});

$('#d2,#d3,#d4').on('click', function() {
  alert("Ele clicked");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="d1">
  <div id="d2">a</div>
  <div id="d3">b</div>
  <div id="d4">c</div>
</div>

更新1： 如果元素是动态添加的，则使用事件委托。

// assumes `#d1` is not dynamically added,
// if yes then use any of it's ancestor present
$('#d1').on('click', '#d2,#d3,#d4', function(){
    alert("Ele clicked");
});

$('#d1').on('click', '#d2,#d3,#d4', function(){
    alert("Ele clicked");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="d1">
  <div id="d2">a</div>
  <div id="d3">b</div>
  <div id="d4">c</div>
</div>

提示：将您的代码放在文档就绪处理程序中，在元素加载后运行，或者将代码添加到页面末尾。

更新2：更好的做法是为所有元素使用共同类，并将处理程序绑定到该类。

$('.d').on('click', function() {
  alert("Ele clicked");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="d1">
  <div id="d2" class="d">a</div>
  <div id="d3" class="d">b</div>
  <div id="d4" class="d">c</div>
</div>