Кнопка не запускается в модальном окне (Bootstrap)

У меня есть кнопка в модальном окне:

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

Я пытаюсь захватить клик:

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

Я прочитал, что нажатие кнопки нажата, чтобы усвоить в модальных окнах, и чтобы это предотвратить, используйте event.preventDefault(). Но это не работает. Я не могу зафиксировать событие нажатия этой кнопки.

Что еще мне не хватает?

Любые советы приветствуются!

Ответы

Ответ 1

Попробуйте это -

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

Или это -

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

Если вы используете более старую версию jQuery, вам, возможно, придется использовать живой метод.

Живой метод (используйте это, только если вам нужно)

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

Я уверен, что один из этих 3 методов, описанных выше, решит вашу проблему. Причина, по которой ваш обработчик событий не работает, заключается в том, что ваш элемент submit_btn не существует во время оценки вашего обработчика событий. Вышеуказанные три обработчика, которые я дал вам, будут работать над элементом submit_btn, который существует сейчас, и в будущем.

/изменить

Вот jsfiddle, который работает - http://jsfiddle.net/GqD4f/8/

/другое редактирование

Я сделал jsfiddle, используя подход, который у вас был в вашем сообщении, и он работает - http://jsfiddle.net/CR3bM/1/

Не помещаете ли вы обработчик событий в DOM?

Ответ 2

Это работает для меня:

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

Ответ 3

Вот как я поступил с классом (.copy-text).

Javascript:

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

Модальный 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>
  </div>
</div>

Ответ 4

У меня была эта проблема только сейчас.

По какой-то причине, если вы завернете

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

в одном из них:

 $(document).ready(function() {

Тогда он не поймает щелчок по какой-то странной причине. Просто удалите окружающий документ:

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

И ваш код должен работать!