Nitish Kumar Nitish Kumar - 1 year ago 170
jQuery Question

Bootstrap modal error

I'm trying to have a

bootstrap modal
which is displayed
on click
event of particular
which are being generated dynamically through
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 class="modal-body" id="portlets_modal_body" style="height: auto; overflow: auto;">
<div id="portlets_modal_footer" class="modal-footer">
<button type="button" class="btn btn-primary">Add Pages</button>

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

Answer Source

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:


$('document').on('click', 'a[data-toggle="modal"]', function() {
    var modalId = $(this).attr('href');
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download