3

Suppose I have a markup like this

<div class="container">

    <div class="abc" onclick="alert(this.innerHTML)">ABC</div>
    <div class="abc1">ABC</div>
    <div class="abc2">abc2</div>
    <div class="xys3">xys3</div>
    <div class="asd23">asd223</div>

</div>

And there are events which are bind to the children of a container like this

$( ".abc1" ).bind( "click", function(){
   alert( $( this ).html() );
} );

$( ".abc2" ).bind( "click", function(){
   alert( $( this ).html() );
} );

$( ".xys3" ).bind( "click", function(){
   alert( $( this ).html() );
} );

$( ".asd23" ).bind( "click", function(){
   alert( $( this ).html() );
} );

Now, I get the html out of container and set it back again :

var html = $( ".container" ).html();
// a set missing here to convert 'bind' events to 'on' events
$( ".container" ).html( html );

Events won't work now since they were not delegated to start with. Also, container may be having more elements (they are dynamic).

Is it possible to find all events inside a container and delegate them?

Here is a Fiddle

Zakaria Acharki
  • 66,747
  • 15
  • 75
  • 101
gurvinder372
  • 66,980
  • 10
  • 72
  • 94

2 Answers2

4

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document. For earlier versions, the .bind() method is used for attaching an event handler directly to elements.

So just use event delegation on() and it will solve the problem :

$( "body" ).on( "click", ".abc2", function(){
    alert( $( this ).html() );
});

You could add a general class to all divs then attach click event to it :

HTML :

<div class="container">

  <div class="my-class abc" onclick="alert(this.innerHTML)">ABC</div>
  <div class="my-class abc1">ABC</div>
  <div class="my-class abc2">abc2</div>
  <div class="my-class xys3">xys3</div>
  <div class="my-class asd23">asd223</div>

</div>

JS :

$( "body" ).on( "click", ".my-class", function(){
     alert( $( this ).html() );
});

Hope this helps.

$( "body" ).on( "click", ".my-class", function(){
  alert( $( this ).html() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <div class="my-class abc" onclick="alert(this.innerHTML)">ABC</div>
  <div class="my-class abc1">ABC</div>
  <div class="my-class abc2">abc2</div>
  <div class="my-class xys3">xys3</div>
  <div class="my-class asd23">asd223</div>

</div>
Zakaria Acharki
  • 66,747
  • 15
  • 75
  • 101
  • Is it possible to find out all the events and then iteratively delegate them rather than hard-code it for each class? – gurvinder372 Feb 24 '16 at 11:13
  • Thanks, but please check the fiddle I had posted. I may not be doing the same thing in all the event handlers. So, needed a way to dynamically iterate, find all the events and then delegating them so that If I simply replace the HTML with the same or different one I shouldn't loose the events. Please give it a go. – gurvinder372 Feb 24 '16 at 11:19
  • 1
    @gurvinder372 see my comment in my answer. That you are thinking is hard and bad practice – Marcos Pérez Gude Feb 24 '16 at 11:21
  • Zak: Not my downvote to anyone (you can have access to mod-tools to verify :)) @MarcosPérezGude I am aware that is not the best practices. if I had control I would have gone wone with delegation at first place. But I just need to get it done if possible. – gurvinder372 Feb 24 '16 at 11:24
  • If it is not possible, please share that as well. – gurvinder372 Feb 24 '16 at 11:25
  • Hey, the downvote is mine! Sorry, I think that I upvoted it. If you edit something in the answer I can fix it – Marcos Pérez Gude Feb 24 '16 at 11:30
3

The delegation methods are like this:

$(document).on( "click", ".abc1", function(){
     alert( $( this ).html() );
});

You can change $(document) with an element in the DOM that hasn't change and it's parent of the children you need to delegate. With document will works in every cases, but the performance can be less.

Zakaria Acharki
  • 66,747
  • 15
  • 75
  • 101
Marcos Pérez Gude
  • 21,869
  • 4
  • 38
  • 69
  • Is it possible to find out all the events and then iteratively delegate them rather than hard-code it for each class? – gurvinder372 Feb 24 '16 at 11:13
  • I think that you are thinking in a bad coding. If you need to iterate all html elements, read if there are events attached (all kind of events) and then store them and use it later, maybe your webpage needs a NASA computer to proccess all the javascript you are writing. The delegation method is that I explain here. – Marcos Pérez Gude Feb 24 '16 at 11:15
  • I don't want to use them later, just want to delegate an event as soon as I get one. Thanks for your time. – gurvinder372 Feb 24 '16 at 11:21
  • I insist: the delegation method is like this. – Marcos Pérez Gude Feb 24 '16 at 11:21