Button click non sparare a finestra modale (bootstrap)

Question

Ho un pulsante in una finestra modale:

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

Sto cercando di catturare lo scatto:

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

Ho letto che i clic sui pulsanti vengono ingeriti in finestre modali e, per evitare ciò, utilizzare event.preventDefault(). Ma non funziona. Non riesco a catturare l'evento click di questo pulsante.

Cos'altro mi manca?

Tutti i suggerimenti sono molto apprezzati!

Answer 1

Prova questo -

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

O questo -

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

Se si utilizza una versione precedente di jQuery potrebbe essere necessario utilizzare il metodo dal vivo, invece.

metodo dal vivo (utilizzare questo solo se si dispone a)

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

Sono abbastanza certo che uno di questi 3 metodi sopra risolverà il problema. Il motivo per cui il gestore di eventi non funziona è perché l'elemento submit_btn non esiste al momento della valutazione del gestore di eventi. I precedenti 3 gestori che ti ho dato lavoreranno su un elemento submit_btn che esiste ora e in futuro.

/modificare

Ecco un jsfiddle che funziona - http://jsfiddle.net/GqD4f/8/

/un'altra modifica

ho fatto un jsfiddle utilizzando l'approccio hai avuto nel tuo post e funziona - http://jsfiddle.net/CR3bM/1/

Non stai mettendo il tuo gestore di eventi in DOM pronto?

Answer 2

questo funziona per me:

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

Answer 3

Ecco come ho fatto con classe (.copy-text).

Javascript:

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

modale 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> 

Answer 4

ho avuto questo problema solo ora.

Per qualche ragione, se si avvolgono

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

all'interno di uno di questi:

$(document).ready(function() { 

allora non prendere il click per qualche strana ragione. Basta rimuovere il documento circostante pronto:

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

E il tuo codice dovrebbe funzionare!