Calling Jquery within / inside a Shadowbox

Question

I have a simple Shadowbox that is called by jquery:

$('#statsButton').click(function() {
    thisContent = $('#userStats').html();
    Shadowbox.open({
        content: thisContent,
        player: "html"
    });
});

I have a div, in that $('#userStats') object that should alert on click:

$("#submitPosition").click(function(e) {
        alert('test');
});

But when I click, nothing happens. Both of the above functions are wrapped in their own document ready blocks. I call Shadowbox.init at the beginning of the script and it works great. It's just that it ignores jQuery events inside. Can anybody help?

Short recap: Basically I have Shadowbox bring up and HTML player. I want jQuery to act as expected within that HTML player.

Answer 1

If you are loading content dynamically into a container, you should use jQuery on() to bind events to objects inside the content because using click() will only bind the event to the existing #submitPosition.

For instance:

$('body').on('click', '#submitPosition', function(e) {
   alert('test');
});

Also, using multiple elements on a page with the same id is not a good practice.

http://api.jquery.com/on/

Answer 2

Try this:

$(document).ready(function(){    
    $("#submitPosition").live('click',function(e) {
            alert('test');
    });
});

This will help. Bcoz when this code intialise time the #submitPosition is not there in html. But live will solve this issue.

Answer 3

I see 2 options:

1) In your userStat div, change to:

$("#submitPosition").click(function(e) {
    alert('test');
}).click();

which will actually call your callback function.

2) Use the onOpen event of shadowbox:

$('#statsButton').click(function() {
    thisContent = $('#userStats').html();
    Shadowbox.open({
        content: thisContent,
        player: "html",
        onOpen: function(){ alert('test'); } 
    });
});