CODEWITHSUNDEEP
jquerytwitter-bootstrapbootstrap-modal
Nitish Kumar
Nitish Kumar

Reputation: 6276

Bootstrap modal error

I'm trying to have a bootstrap modal which is displayed on click event of particular buttons which are being generated dynamically through insertAfter() function in the section in jQuery. I'm having a section which on hovering gives the border and while clicking on the section buttons are being displayed as you can see in the following link I've placed a jQuery function for generating buttons as

$('#page-wrapper').find('[data-nitsid]').each( function () {

    var nits = $(this).data("nitsid");
    $("<div id='" + nits + "' class='clearfix' style='display: none;'><a href='#' class='btn btn-circle btn-sm default sorthandle'>Sort <i class='fa fa-arrows'></i></a><a href='#nitsedit" + nits + "' role='button' data-toggle='modal' class='btn btn-circle btn-sm default'> Edit <i class='fa fa-pencil-square-o'></i></a><a href='#clone" + nits + "' class='btn btn-circle btn-sm default'> Clone <i class='fa fa-clone'></i></a><a href='#delete" + nits + "' class='btn btn-circle btn-sm default'> Delete <i class='fa fa-trash'></i></a></div>").insertAfter(this);
});

And having a modal accordingly:

<div class="modal fade modal-primary in" id="nitsedit3" tabindex="-1" data-backdrop="static" data-keyboard="false" role="dialog" aria-labelledby="nitseditlabel" style="padding-right: 17px;">
    <div class="modal-dialog" role="document" style="width: 300px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="fa fa-times fa-lg"></i></span></button>
                <h4 class="modal-title" id="portlets_modal_label">Navigation</h4>
            </div>
        <div class="modal-body" id="portlets_modal_body" style="height: auto; overflow: auto;">
        .
        .
        .
        </div>
            <div id="portlets_modal_footer" class="modal-footer">
                <button type="button" class="btn btn-primary">Add Pages</button>
            </div>
         </div>
     </div>
</div>

The buttons are not able to display the modal, I can see both the id's are same, I've included the bootstrap library properly, even I tried pushing Z-index but I'm unable to display the modal. I tried to run in JSBin Editor and it's working over there.

Upvotes: 0

Views: 836

Answers (1)

StaticBeagle
StaticBeagle

Reputation: 5175

I think the problem is that since you are adding those anchors dynamically you will have to bind the click event to the document itself:

jQuery

$('document').on('click', 'a[data-toggle="modal"]', function() {
    var modalId = $(this).attr('href');
    $(modalId).modal('show');
});

Upvotes: 1

Related Questions