How To Open A Modal In Bootstrap If This Is Loaded Via Ajax?

I am calling a div where the modal is via Ajax. Once the div and its modal has been loaded, the button won't open the modal. The code below is the modal structure, it is just a pla

Solution 1:

You can use the jQuery to open the modal:

$(document).ready(function(){
    $('button[data-target="myModalZ"]').click(function(){
        $('#myModalZ').modal('show');
    });
});

More Documentation is here.

EDITED:

$(document).ready(function(){
    $('button[data-target="myModalZ"]').click(function(){
        if($('#myModalZ').length){
           $('#myModalZ').modal('show');
        } else {
           alert('Your message');
        }
    });
});

Solution 2:

First append received content inside body somewhere. Then trigger modal manually.

$.ajax(
    {
        url: "http://www.example.com/someAPI", 
        success: function(result){
            // Append content somewhere// Init button click event once your content is ready
            $('button[data-target="myModalZ"]').click(function(){
                $('#myModalZ').modal('show');
            });

    }
});

Please check out full documentation here.