web-dev-qa-db-fra.com

Le clic du bouton ne se déclenche pas dans la fenêtre modale (Bootstrap)

J'ai un bouton dans une fenêtre modale: 

<button id="submit_btn" class="btn btn-link">Send the invitation</button>

J'essaie de capturer le clic:

$('#submit_btn').click(function(event){
    event.preventDefault();
    alert( "GO" ); 
});

J'ai lu que les clics sur les boutons étaient avalés dans les fenêtres modales et que, pour empêcher cela, utilisez event.preventDefault (). Mais ça ne marche pas. Je ne peux pas capturer l'événement de clic de ce bouton. 

Que manque-t-il d'autre? 

Tous les conseils sont très appréciés!

javascriptjquerytwitter-bootstrap
24
fumeng

Essaye ça -

$(document).on("click", "#submit_btn", function(event){
    alert( "GO" ); 
});

Ou ca -

$(document).delegate("#submit_btn", "click", function(event){
    alert( "GO" ); 
});

Si vous utilisez une version plus ancienne de jQuery, vous devrez peut-être utiliser la méthode live à la place.

Méthode Live (à utiliser uniquement si vous devez le faire) 

$("#submit_btn").live("click", function(event){
    alert( "GO" ); 
});

Je suis à peu près certain qu'une des 3 méthodes ci-dessus résoudra votre problème. La raison pour laquelle votre gestionnaire d'événements ne fonctionne pas est parce que votre élément submit_btn n'existe pas au moment de l'évaluation de votre gestionnaire d'événements. Les 3 gestionnaires ci-dessus que je vous ai donnés travailleront sur un élément submit_btn qui existe maintenant et dans le futur.

/modifier

Voici un jsfiddle qui fonctionne - http://jsfiddle.net/GqD4f/8/

/ autre édition

J'ai fait un jsfiddle en utilisant l'approche que vous aviez dans votre post et cela fonctionne - http://jsfiddle.net/CR3bM/1/

Ne mettez-vous pas votre gestionnaire d’événements dans DOM prêt?

62
Ross

Cela fonctionne pour moi:

$(document).on("click", "#submit_btn", function(event){
    alert("GO"); 
});
2
Bartolomeo V

Voici comment j'ai fait avec la classe (.copy-text).

Javascript:

$(document).on('click', '.copy-text', function(){
    console.log($(this));
});

Modal html:

<div class="modal fade" id="someid" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
           <div class="modal-body">    
               <ul class="list-group"> 
                 <li class="list-group-item copy-text">Some text</li>
               </ul>
           </div>
        </di>
    </di>
1
Muhammad Shahzad

J'ai eu ce problème tout à l'heure. 

Pour une raison quelconque si vous envelopper 

  $(document).on("click","span.editComment",function(event) {

dans l'un de ceux-ci:

 $(document).ready(function() {

Ensuite, il n’arrête pas le clic pour une raison étrange. Il suffit de retirer le document environnant prêt:

 $(document).ready(function() {}

Et votre code devrait fonctionner! 

0
Jonathan Laliberte