Bootstrap modal does not display from modal with content created by AJAX call

Question

I am working on a web app that opens a Bootstrap modal displaying user contacts by clicking an icon. The data in this modal is created from an AJAX call. The dynamic data contains an anchor tag that should open a second modal when clicked that will allow the user to edit the contact information. The tag in the first modal looks like this:

    <a href="#" class="text-gray edit-contact" data-toggle="modal" data-target="#edit-contact">Edit</a></div><div class="clearfix"></div></div>';     

The page contains a dialog modal with id="edit-contact"

Clicking on this link does nothing when it is dynamically generated, but if it is hardcoded in the page, the second modal opens as expected. Also, events such as click don't work on the dynamically generated content.

From the same page, I am able to open a modal from AJAX data, but the link to open the modal is on the page on not on another modal, so it looks like the Bootstrap modal has an issue with dynamic content - has anyone run into this issue? -Thanks!

Answer 1

You need to call the opening of the modal in your ajax success :

$.ajax("myUrl").success(function(data)
{
  $('#edit-contact').append(data).modal('show');
});

---

<div id="edit-contact" class="modal fade" role="dialog" aria-labelledby="modalTitle" aria-hidden="true"></div>

Answer 2

I think you should use delegate or other tools like on . I perfer delegate. You have to give that element a second command so that it is clickable. Like:

$(selector).delegate(this,"click",function(){
     //Do something as you wish
});

See this delegate link for more documentation.