This forum has moved to a new location and is in read-only mode. Please visit talk.octobercms.com to access the new location.

Tschallacka
Tschallacka

Sometimes(most of the times in my case) I work with dynamically generated elements. On those elements, I don't want their event handlers to bubble to the parent element because then you get mixed functionalities.

The unfortunate thing is, if you do that you lose the easy data access functionality by the popup data handlers.

/** wrap it in a self executing anomynous function 
    * for scoping, so we can keep accessing the 
    * info elem from within the scope :-)) 
    **/
(function() {
    /** Generate the div that will trigger the popup 
        * with the data handler elements, 
        * put in your own data here ;-) 
        **/
    var infoelem = $('<div class="icon-info-circle readallcomments-icon"  data-control="popup" data-size="huge"  data-request-data="date:{day:10,month:4,year:2014}" data-handler="formPricerules::onAllComments" data-keyboard="true" href="#">');
    /** Add onclick handler within out scoped info elem **/
    infoelem.on("click",function(e){
        /** best practises, you never know **/
        if(!e.isPropagationStopped()) {
            /** Stop it, don't let any other elements but this element trigger an onclick **/
            e.stopPropagation();
            /** We do want our popup up though. 
                * For this we only need to call popup() 
                * and the popup will just automagically 
                * read its desired values 
                **/
            infoelem.popup();
        }
    });
    /** Add it to our container class 
        * from outside the anomynous 
        * scope(it's a jQuery instance fyi)
        **/
    commentelem.append(infoelem);
})();

Basically if you have access to the jQuery object of a data handler properties containing object, you can just call $('elem').popup() and it will automatically work :-)

Last updated

chris10207
chris10207

interesting, thanks for the tricks !

1-2 of 2

You cannot edit posts or make replies: the forum has moved to talk.octobercms.com.