Dynamically Created Bootstrap3 Modals Do Not Work

I have a page with dynamically generated list of items. Every item has button toggling modal window with more info but modal do not appear. The modals are placed right after body o

Solution 1:

Here is step by step Implementation in one of my project, hope it will help.

1-Suppose its your List, which have button in it(MVC Razor view example).

@foreach (var list in ListCollection)
 {                            
  <button type="button" class="btn btn-xs  btn-primary" data-toggle="modal" data-target="#exampleModal" data-id="@list.ID> Details </button>
 }

2-Here I have put data-id to each button to open a modal for this button in the list.

3-Each button will open the modal with more info using script(script below).

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">Title Here</h4>
            </div>
            <div class="modal-body">
              //Put here more details of the item, by Ajax call or any thing you like
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

4-Now the script part

$(document).ready(function () {
        $('#exampleModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);//Button which is clicked
            var clickedButtonId= button.data('Id');//Get id of the button

            var modal = $(this);
            modal.find('.modal-body').text(clickedButtonId);
//Id of the clicked button which i have put inside the modal-body div class or put info here using ajax call for the button that button.

//Ajax call to get the more details of clicked button in the list.

            $.ajax({
                url: "URL",
                type: "POST",
                data: JSON.stringify({ id: clickedButtonId}),
                dataType: 'JSON',
                contentType: "application/json",
                success: function (response) {
                    modal.find('.modal-body').text(response);//Put here more info using ajax
                }
                  ,
                error: function () {

                }
            });

        })

    });