Вызов Jquery внутри / внутри Shadowbox

Question

У меня есть простой Shadowbox, который вызывается с помощью jquery:

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

У меня есть div, в этом $('#userStats') объект, который должен предупреждать о клике:

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

Но когда я нажимаю, ничего не происходит. Обе вышеперечисленные функции обернуты в свои готовые блоки документов. Я звоню Shadowbox.init в начале сценария, и он прекрасно работает. Просто он игнорирует события jQuery внутри. Кто-нибудь может помочь?

Краткое резюме: в основном у меня есть Shadowbox и HTML-плеер. Я хочу, чтобы jQuery действовал так, как ожидалось в этом HTML-плеере

Answer 1

Если вы загружаете контент динамически в контейнер, вы должны использовать jQuery on() привязывать события к объектам внутри контента, потому что с помощью click() будет привязывать только событие к существующему #submitPosition,

Например:

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

Кроме того, использование нескольких элементов на странице с одинаковым идентификатором не является хорошей практикой.

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

Answer 2

Попробуй это:

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

Это поможет. Потому что, когда этот код инициализирует время, #submitPosition отсутствует в html. Но в прямом эфире решит эту проблему.

Answer 3

Я вижу 2 варианта:

1) В вашем userStat div измените на:

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

который на самом деле вызовет вашу функцию обратного вызова.

2) Используйте событие onOpen shadowbox:

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