JQuery click event not working in bootstrap modal

Question

I have this line of code in my page:

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

This line is actually in a bootstrap modal. I want that when a user clicks it, I want the div above it cloned. The issue is not the code for the cloning but that the click event is not even raised. In my .js file, I have this:

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

The ellipsis is for the code for preventing defaults and cloning. I tried testing with an alert. It still didn't work. I don't know why.

I discovered that if I added onClick='alert(...) in the tag, it worked.

Can anyone help?

This is the HTML of the modal (Wouldn't mind if anyone helped with formatting. I know it's a mess):

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

Answer 1

Try event delegation - jQuery's .on() method.

If the event is not working it may be because your tag <a id='addMore' href='#'>Add more </a> is added after the pages loads. You can catch the event with his parent container (note: the parent should already exist in the DOM when the pages loads). Try this:

$(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');
    });

});

Answer 2

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

Modal is not ready with $(document).ready function. It becomes ready when it pops-up. Probably the reason behind this (I'm not sure about it though). It worked for me, that's why I posted the answer.

Answer 3

I hope this will helpful to you. I had the same issue, i just added modal ID in Jquery click event and it worked for me. Try this

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

Answer 4

This isn't really an answer but it 'magically' resolved the issue. I moved the code for that page to another .js file and it worked. The former file was linked to many pages. I guess that was the source of problem. It seems strange though.

Answer 5

My guess is that your element is added in the page after jQuery.ready event. Is your code in that block?

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

Answer 6

I hope it's only a typo but you have a double quote before the id attribute, right after the a tag. In the first part of the code, it's ok though.

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

It can probably mess things up...

Answer 7

I had accidentally assigned the same id attribute to two different buttons in different modal dialogs. Changing this fixed the issue:

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

This worked just as expected.