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>

Is this HTML present at the time of page load or is it being added from a source? — tymeJV, Mar 04 '14 at 17:33
If you're using bootstrap and jquery in the same code, did you remember to use `jQuery.noConflict()`? — Barmar, Mar 04 '14 at 17:33
Can you create a [jsFiddle](http://jsfiddle.net/v9TyJ/) and post the URL in your question? Customize the one I linked, click FORK, and post the new URL. — cssyphus, Mar 04 '14 at 17:35
There is no function to run in your bind statement. It needs to be `$("#addMore").click(function(){alert("...")});` — StephenRios, Mar 04 '14 at 17:35
@StephenRios There's a function in the code. I felt there was no need to write it since the event is the issue, not the function — afaolek, Mar 04 '14 at 17:39
Are you seeing any errors in the console? Do you have the jQuery code within a document ready handler? — Jay Blanchard, Mar 04 '14 at 17:40
@Barmar If that's the cause, then some weird stuff must be going on because other jQuery codes are working. Besides, bootstrap uses jQuery, so there shouldn't be any conflict. — afaolek, Mar 04 '14 at 17:42
@gibberish I can't access jsfiddle for now. Not technical reasons. Just some limitations here. — afaolek, Mar 04 '14 at 17:48
We're going to need to see more then - there is not enough code for us to go on. — Jay Blanchard, Mar 04 '14 at 17:48
@Jay What makes it weird is that similar code works for another modal on another page using the same .js file. I have done hard refresh to clear the cache. Still doesn't work. — afaolek, Mar 04 '14 at 17:54
Is this being added dynamically? Have you tried $('body').on('click', '#addMore', function() {...}? — Jay Blanchard, Mar 04 '14 at 17:56
@Jay That's exactly the last piece of code I've tried. It's not working. — afaolek, Mar 04 '14 at 17:59
Do you have more than one element with the addMore id in the page? — Jay Blanchard, Mar 04 '14 at 18:00
Just checking. There must be more than meets the eye here then. Can you post more of the code? — Jay Blanchard, Mar 04 '14 at 18:30

Arnab · Answer 1 · 2021-12-30T09:08:50.043

25

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

Modal is not ready with $(document).ready function. It becomes ready when it pops-up. This is the reason behind this.

edited Dec 30 '21 at 09:08

answered Oct 29 '15 at 13:52

Arnab

4,216
2
28
50

Could you add some details of why this should work? Code-only answers are not very useful and are subject to deletion. – Cristik Oct 29 '15 at 17:25
More details would be helpful. This approach corrected my problem though. – phenicie May 24 '16 at 15:47
1

I believe I know why this works, (it did correct my problem). By binding a click event on the document, every time you click the page anywhere, you refresh its DOM listing, which means that anything that was added after the document send the ready code is now available to `on()`. The middle argument is then used to specify the id/class that was added after `document.ready()` concluded. – Kyle L. Jul 06 '16 at 16:03
1

instead of document you could have used the modal Id like this : `$('#modal-Id').on('click', '#addMore', function(){...});` – Axel Sep 12 '16 at 15:44
Thanks for reminding me about this syntax. It's really weird, sometimes `$("button[id^='dismissDtModal_']").on('click', function(event) {...` works fine, and other times, I have to go with `$(document).on('click', "button[id^='dismissCmNotFound_'][id$='_Modal']", function (event) {...` I wish I had a better understanding of why, especially when both of those are used to handle a click of the 'close' button on BS Modal dialogs. – Scott Fraley Oct 03 '17 at 15:53

score 20 · Answer 2 · edited Dec 22 '15 at 16:02

20

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

});

edited Dec 22 '15 at 16:02

cssyphus

37,875
18
96
111

answered Mar 04 '14 at 19:11

Luis.Andrade

318
1
9

This worked for me, ***although in my case the tag is not loaded after the page loads.*** Event delegation should not have solved my problem, but it did. *"Mine is not to reason why; mine is but to pry and pry." - Lynn Johnston* – cssyphus Dec 22 '15 at 16:02
You know, sometimes to find the solution to a problem we have to go deeper and deeper to find the reason. I glad that this solution help you. – Luis.Andrade Dec 22 '15 at 19:24

score 4 · Answer 3 · answered Dec 28 '14 at 20:57

4

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 (...)

answered Dec 28 '14 at 20:57

Mohammed Samiullah

175
1
12

score 3 · Answer 4 · answered Mar 14 '14 at 08:53

3

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.

answered Mar 14 '14 at 08:53

afaolek

8,452
13
45
60

score 2 · Answer 5 · answered Mar 04 '14 at 17:44

2

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 (...) )

answered Mar 04 '14 at 17:44

Phil Perusse

51
1

I'm sorry your guess is wrong. The HTML is already on the page. It's a Bootstrap modal. – afaolek Mar 04 '14 at 17:50

score 2 · Answer 6 · answered Mar 04 '14 at 21:33

2

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

answered Mar 04 '14 at 21:33

Phil Perusse

51
1

score 2 · Answer 7 · edited Feb 22 '18 at 20:45

2

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.

edited Feb 22 '18 at 20:45

halfer

19,824
17
99
186

answered Jun 20 '16 at 14:29

DroidOS

8,530
16
99
171

JQuery click event not working in bootstrap modal

7 Answers7