There are two div in my page.
<div id="test-1000"></div>
<div id="test-1111"></div>
In view of above single click event source jQuery is:
$('#test-1000').click(function(){});
But how to achieve two div with a similar to the above statement click events to be monitored are, and how to distinguish between div, which is the click event?
I'll use a common class attribute to group all the target elements
<div class="test" id="test-1000" data-id="1000"></div>
<div class="test" id="test-1111" data-id="1111"></div>
then
$('.test').click(function(){
//here this.id will give the clicked div id and this will refer the clicked dom element
//$(this).data('id') will give 1000/1111
})
Just use $(this) in the callback function to know 'which' element the event fired on.
$('.test').click( function() {
alert( $(this).attr('id') );
});
I prefer to go with data attribute and class approach
HTML code
<div class="test" data="0000">1</div>
<div class="test" data="1111">2</div>
js
$('.test').click(function(){
alert($(this).attr("data"));
});
sample demo
Alternatively, if you don't want or can't modify your html, you can use jquery "starts-with" selector.
<div id="test-1000"></div>
<div id="test-1111"></div>
$("[id^='test']").on('click', function(){
console.log(this.id);
});
HTML
<div class="test" id="test-1000" data-id="1000"></div>
<div class="test" id="test-1111" data-id="1111"></div>
Js
$('.test').click(function(){
//here this.id will give the clicked div id and this will refer the clicked dom element
//$(this).data('id') will give 1000/1111
});
Maybe something like:
document.getElementById("test-1000").onclick = function(){});
You can not use the element before it is defined.
