Appel Jquery à l'intérieur/à l'intérieur d'un Shadowbox

Question

J'ai simple Shadowbox qui est appelé par jquery:

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

j'ai une div, dans cet objet $('#userStats') qui devrait alerter sur un clic:

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

Mais quand je clique, rien ne se passe. Les deux fonctions ci-dessus sont enveloppées dans leurs propres blocs de document prêt. J'appelle le Shadowbox.init au début du script et ça marche très bien. C'est juste qu'il ignore les événements jQuery à l'intérieur. Quelqu'un peut-il aider?

Bref récapitulatif: Fondamentalement, j'ai Shadowbox et lecteur HTML. Je veux que jQuery agisse comme prévu dans ce lecteur HTML.

Answer 1

Si vous chargez un contenu dynamique dans un conteneur, vous devez utiliser jQuery on() pour lier les événements à des objets à l'intérieur du contenu, car en utilisant click() ne se lie l'événement à la #submitPosition existante.

Par exemple:

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

Aussi, en utilisant plusieurs éléments sur une page avec le même identifiant est pas une bonne pratique.

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

Answer 2

Essayez ceci:

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

Cela vous aidera. Bcoz lorsque ce code initialise le temps #submitPosition n'est pas là en html. Mais en direct permettra de résoudre ce problème.

Answer 3

Je vois 2 options:

1) Dans votre userstat div, passez à:

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

qui fait appel à votre fonction de rappel.

2) Utilisez l'événement onOpen de shadowbox:

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