CODEWITHSUNDEEP
jqueryjquery-mobile
user3440788
user3440788

Reputation: 1

jQuery Mobile Dynamic Nested Collapsible with Embedded Buttons

Does anyone have any suggestion for constructing nested collapsibles with embedded buttons. In the attached jsbin clicking on the embedded button in the static collapsible will dynamically nest an additional collapsible with it's own button. The problem is I see no way to link to the dynamically created collectable button so the process could continue. I attempted to use both trigger() and enhancedWithin() on the buttons parent element.

http://jsbin.com/helif/4/edit

Upvotes: 0

Views: 112

Answers (1)

ezanker
ezanker

Reputation: 24738

Event delegation should work:

$(document).on("click", ".collapsibleButton", function(e){...});

This should bind to any dynamically created buttons with that class name.

If that does not work for you, then each time you create a dynamic collapsible, use .off() to remove the click handler and .on() to re-add it:

$(".collapsibleButton").on("click", function(e){
        onClick(e);
});

function onClick(e){
        alert("COLLAPSIBLE BUTTON CLICKED");
        console.log("clicked on "+$(e.target).attr('class') );      
        var element =
        "<div data-role='collapsible' class='collapsible' data-collapsed='false'>" +
            "<h3 class='collapsibleTitle'><p>Dynamic Collapsible</p>" +
                "<div class='button-set' style='float: right'>" +
                    "<input type='button' class='collapsibleButton' value='Button' data-mini='true' data-icon='gear' data-icon-pos='top' />" +
                "</div>" +
            "</h3>" +
            "<div class='content'><p>CONTENT</p></div>" +
        "</div>";

        $(element).appendTo($(e.target).closest('.collapsible').find('.content:first'));
        $(e.target).closest('.collapsible').find('.content:first').enhanceWithin();
        $(e.target).closest('.collapsible').find('.content:first').find('.button-set:first').enhanceWithin();      

        $(".collapsibleButton").off("click").on("click", function(e){
            onClick(e);
        });

        e.stopPropagation();
        e.stopImmediatePropagation();  
        return false;

}

Upvotes: 1

Related Questions