Trigger Bootstrap modal on dynamically added data-toggle element

Question

I'm dynamically creating and adding the following to the DOM:

<a href="my_modal_link" data-toggle="modal">Click me</a>

However, since this content is added dynamically after the page is loaded, the Bootstrap modal is never registered, and clicking the link navigates the browser to the new page rather than displaying it as a modal dialog.

How can I get Bootstrap to know about this dynamically added modal tag so that it will display the content in a modal when the link is clicked? Or, do I have to manually wire up the click event to call .modal()?

The answer is yes u have to bind the click event

Shehary
– Shehary

2015-08-03 01:57:28 +00:00
Commented Aug 3, 2015 at 1:57 — Shehary
– Shehary, Commented Aug 3, 2015 at 1:57

davcs86 · Accepted Answer · 2015-08-03 02:55:39Z

1

As you're creating dynamically the links, you have to use event handlers, something like this

HTML

<a href="#my_modal1" class="modal_links" data-toggle="modal">Click me # 1</a>
<a href="#my_modal2" class="modal_links" data-toggle="modal">Click me # 2</a>
<a href="#my_modal3" class="modal_links" data-toggle="modal">Click me # 3</a>
....
<a href="#my_modalN" class="modal_links" data-toggle="modal">Click me # N</a>

JS

jQuery(function($){
    $("body").on("click",".modal_links",function(ev){
        ev.preventDefault();
        var modalToOpen = $(this).attr("href");
        $(modalToOpen).modal('show'); // also you can use "toggle" instead of "show"
    });
});

answered Aug 3, 2015 at 2:55

davcs86

3,9462 gold badges20 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Trigger Bootstrap modal on dynamically added data-toggle element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related