I have:

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

What I want is in which ever of the above element is clicked call this function:

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

I tried these But none worked:

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");
});

or

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

or

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

But none worked

I have:

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

What I want is in which ever of the above element is clicked call this function:

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

I tried these But none worked:

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");
});

or

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

or

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

But none worked

• javascript
• jquery

• 1 whu not use a class for all – guradio Commented May 17, 2017 at 8:16

7 Answers 7

Your selector #menu_ico does not point to the element the element ids are d1, d2 and d3 so bine the id selectors and bind click event handler.

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

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

<script src="https://ajax.googleapis./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>

UPDATE 1: If the elements are dynamically added then use event delegation.

// 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./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>

FYI : Use your code within document ready handler to run after elements are loaded or add code at the end of the page.

UPDATE 2: The better approach would be using a mon class for all elements and bind the handler to that.

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

<script src="https://ajax.googleapis./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>

Event Delegation should be the way to go.

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

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

<script src="https://ajax.googleapis./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>

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

<script src="https://ajax.googleapis./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>

use $('div[id^="d"]') to select all div with id starting with d you can use any other pattern also like $('#d1 > div[id^="d"]') to select all div with id starting with d inside d1 div.

$('.mon').click(clickedele)

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

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

1. Add class mon to all.
2. Use class to click

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

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

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

1. Use the parent as selector then add space and div meaning child of parent select like $('#d1 div')

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/emilvr/dyzgcju5/

You can give child divs a mon class. Lets suppose the class name is childDiv. Then you can handle the click event of the divs.

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

Its better to use a loop for that:

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