0

I have a syntax issue with writing the delegate function to make it work for each dynamiccaly inserted div.

The container is "column", and in "column" I insert many "dragbox" :

                            <div class="dragbox">
                                <h2>Actions
                                    <button type="button">
                                        <i class="fa fa-sort-desc"></i>
                                    </button>
                                </h2>

                                <div class="dragbox-content">                                       
                                    content of the dragbox
                                </div>
                            </div>

So in each "dragbox" I have an "h2" and a "dragbox-content". My goal is to toggle the "dragbox-content" when I click on the "h2". Because the "dragbox" are inserted dynamically, I found out that I need to use the function "delegate" to make it work :

jQuery click not working for dynamically created items

jquery .delegate and dynamic content

Howver, my problem is that I don't know how to write it to make each "dragbox" have the same behaviour.

Here is what I tried so far :

$('.column').children('.dragbox').each(function(){
            $(this).delegate("h2", "click", function(){
                $(this).siblings('.dragbox-content').toggle();
            }).end();

});

This works perfectly fine on static "dragbox", but not on dynamically inserted "dragbox". And I really need to use the function "each" because the toggle event is independent for each single "dragbox". I don't want all the dragboxes to toggle when I click on the header of one of them.

The libraries I used are jQuery and jQuery-ui.

Community
  • 1
  • 1
josefk
  • 115
  • 1
  • 1
  • 10

1 Answers1

1

Do the delegation from the column:

$(".column").delegate(".dragbox h2", "click", function() {
    $(this).siblings('.dragbox-content').toggle();
}).end();

With modern versions of jQuery (from 1.7, released in November 2011), you'd use .on, which is similar to .delegate but the parameters are switched:

$(".column").on("click", ".dragbox h2", function() {
    $(this).siblings('.dragbox-content').toggle();
}).end();

Personally I try to do all delegation from the document:

$(document).on("click", ".column .dragbox h2", function() {
    $(this).siblings('.dragbox-content').toggle();
}).end();

That way I can do the event handling initialization at any time without worrying about whether content is ready for it.

Pointy
  • 405,095
  • 59
  • 585
  • 614
  • Thank you very much! I tried both the solutions with .on and .delegate. The one with .on worked only with the static dragbox, even though it is written here [http://www.w3schools.com/jquery/event_on.asp ] that it works for both current and future elements. But the solution with .delegate works with the dynamic and the static dragbox. – josefk Aug 26 '15 at 15:13
  • Maybe it has something to do with the libs I'm using. I'm using the latest version of jquery so I don't understand why .on did not work... – josefk Aug 26 '15 at 15:14
  • I'm actually using 1.11.3 and .delegate is deprecated since 1.7 – josefk Aug 26 '15 at 15:16
  • @josefk well `.on()` works so long as you're using the three-argument version and not the two-argument version. The first argument is the event type(s) to handle, the second argument is the selector, and the third argument is the handler function. – Pointy Aug 26 '15 at 15:18