Shadowbox not allowing jQuery events inside the overlay

[priestjim]

Hi all!

I am using the Shadowbox HTML code adapter to display a local overlay with some login information inside my page. I also have applied some jQuery event magic for the elements inside the div I want the shadowbox to display in the form of:

$.fn.CBCustomizer = function(){
[...]
                        myCB.bind("click", function(e) {
                                myCBMouseDown = true;
                                if ($(this).find("input").attr("checked") == true) {
                                        $(this).find("input").removeAttr("checked");
                                        $(this).attr("class","checkbox_div_off_up");
                                }
[...]
});

$(document).ready( function() {
        $("#loginRemember").CBCustomizer();
});

However, even though the serial $ code is executed correctly (the checkboxes are skinned), the binded events just don't work (click, mouseover etc). It seems SB is catching them instead of the actual overlay elements. Is there any way I could enforce the opposite (and correct) behavior?

Thanks in advance!

[Joe E]

I'm having a very similar issue. Did you ever get this figured out?

Thanks,
Joe

[Serge D]

Same here.
I have successfully created the Ajax lined login form which uses partial html for content and error handling.
Partial HTML returned via Ajax request has some javascript. My hope is that when partial html is loaded and contains some javascript inside it would be fired...
But it is not...

Note: I am using Ajax player posted earlier

[Wizzud]

This is not the same problem.
Your problem is with my ajax player (for jQuery); the original poster's problem is with Shadowbox's inline html player.

Your problem:
In shadowbox-ajax.js (v1.1, for Shadowbox v3.0b), change the append() function to

        append: function(body, id, dims){
            this.id = id;
            // give 'html' class to enable scrolling, plus 'html_ajax' just in case it's needed
            var wrap = '<div id="' + this.id + '" class="html html_ajax">' + this.html + '</div>';
            this.container = jQuery(body).html(wrap).find('#'+this.id);
            if(this.options.ajaxload){
              this.options.ajaxload.call(this);
            }
        } //end append()

[Wizzud]

Javascript events applied to html code that is targeted for inclusion into Shadowbox as inline html will not be present within the Shadowbox. This is because Shadowbox copies the original html.
If you need events/effects applied to the code when it is within Shadowbox, then you either need to apply them after Shadowbox has copied the code, or use jQuery's live() event capability. But be warned: because of the copy, the targeted html code should not contain id's (they will be duplicated when copied, and only the original will be referenced)!

[Serge D]

Beautiful!  Thank you Wizzud. It works now as expected.
Would Ajax player be included in standard packaging?

About your other comment. While initial example may not be the same as in my case, it could be easily adopted to work with this player and it would then work as expected.

[8bitmorethan]

@priestjim
Simply select the correct copy of the material with jQuery (since Shadowbox copies inline material, if its NOT inline then something else is wrong) by doing, for an example, this:

$('#sb-content #type option:selected').text()

..this would get the currently selected element in a select form list --> the #sb-content selector will make sure that the correct copy is targeted (the one opened in Shadowbox).

That's all, hope its helps you/someone out there :)

~8bitmorethan