Событие JQuery click не работает в bootstrap modal

У меня есть эта строка кода на моей странице: 

<div id='data'>...</div>      
<a id='addMore' href='#'>Add more </a>

Эта строка на самом деле в модале начальной загрузки. Я хочу, чтобы, когда пользователь щелкает по нему, я хочу, чтобы div над ним клонировался. Проблема не в коде клонирования, а в том, что событие click даже не возникает. В моем файле .js у меня есть это: 

$('#addMore').click (...)

Многоточие предназначено для кода по умолчанию и предотвращения клонирования. Я попытался проверить с предупреждением. Это все еще не сработало. Я не знаю почему.

Я обнаружил, что если я добавлю onClick='alert(...) в тег, это сработает.

Кто-нибудь может помочь?

Это модальный HTML-код (не против, если кто-нибудь поможет с форматированием. Я знаю, что это беспорядок): 

<div id="addEmailModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="addEmailLabel" aria-hidden="true">   
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times; </button> 
        <h3 id="addEmailLabel">Add Email</h3>
    </div>
    <div class="modal-body">
        <div id="emailData">
            <input type="text" placeholder="Name (optional)" class="input-xlarge" />
            <input type="email" placeholder="Email" />
        </div>
        <a id="addMore" href="#">Add more&hellip;</a>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary" id="btnAdd">Add</button>
    </div>
</div>

Ответы

Ответ 1

Попробуйте делегирование событий - метод jQuery .on().

Если событие не работает, это может быть связано с добавлением тэга <a id='addMore' href='#'>Add more </a> после загрузки страниц. Вы можете поймать событие своим родительским контейнером (обратите внимание: родительский объект уже должен существовать в DOM при загрузке страниц). Попробуйте следующее:

$(document).ready( function () {
    //Search the parent class, id, or tag and then try to find the <a id="addMore"></a>  as a child
    $('.parent #addMore').on('click', function () {
        alert('addMore click event');
    });
    //Try too with the specific tag
    $('a#addMore').on('click', function () {
        alert('addMore click event');
    });
    //And try too with the specific tag
    $('a #addMore').on('click', function () {
        alert('addMore click event');
    });

});

Ответ 2

$(document).on('click', '#addMore', function(){...});

Модаль не готов с функцией $(document).ready. Он становится готовым, когда он всплывает. Вероятно, причина этого (я не уверен в этом). Это сработало для меня, поэтому я отправил ответ.

Ответ 3

Надеюсь, это поможет вам. У меня была такая же проблема, я просто добавил идентификатор модальности в событие JQuery click, и это сработало для меня. Попробуйте это

$('#addEmailModal #addMore').click (...)

Ответ 4

На самом деле это не ответ, но он "магически" разрешил проблему. Я переместил код для этой страницы в другой .js файл, и он сработал. Первый файл был связан со многими страницами. Я думаю, это было проблемой. Кажется странным, хотя.

Ответ 5

Я предполагаю, что ваш элемент добавляется на страницу после события jQuery.ready. Ваш код в этом блоке?

$( document ).ready( $('#addMore').click (...) )

Ответ 6

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

 <a" id="addMore" href="#">Add more&hellip;</a>

Возможно, это может испортиться...

Ответ 7

Я случайно назначил один и тот же атрибут id двум разным кнопкам в разных модальных диалогах. Изменение этого исправило проблему:

$(document).ready(function((){/*assign click to modal dialog buttons...

Это сработало так, как и ожидалось.