jquery - Buttons inside Bootstrap Popover are not triggered -
jquery - Buttons inside Bootstrap Popover are not triggered -
i'm tring trigger buttons within popover loaded ajax couldn't find solution. here tried:
popover loaded ajax:
$('.item-instances').popover({ trigger: 'click', placement: 'bottom', title: 'title', html: true, content: function(){ var toreturn = []; $.each(iteminstances($(this)), function(k, v){ toreturn[k] = '<a href="#" class="instance-image-'+ v.image_id +'">abc</a>'; }); homecoming toreturn; } });
and tried trigger link popover:
$( document ).ajaxcomplete(function() { $('a[class^="instance-image-"]').each(function(index, el) { $(this).on('click', function(event) { event.preventdefault(); console.log('test'); }); }); });
any suggestion whould great. give thanks you.
you may binding multiple times, can utilize unbind()
, this:
class="snippet-code-js lang-js prettyprint-override">$('.item-instances').popover({ trigger: 'click', placement: 'bottom', title: 'title', html: true, content: function(){ var toreturn = []; $('.item-instances').each(function(k, v){ toreturn[k] = '<a href="#" class="instance-image-'+ k +'">abc</a>'; }); homecoming toreturn; } }); function rebindlisteners() { $('a[class^="instance-image-"]').each(function(index, el) { $(this).unbind().on('click', function(event) { event.preventdefault(); console.log('test'); alert('works'); }); }); } $( document ).ajaxcomplete(rebindlisteners); // illustration $(document).on('shown.bs.popover', rebindlisteners);
class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <button type="button" class="btn btn-default item-instances" data-container="body" data-toggle="popover"> popover on bottom </button>
note modified content since not have functions / data.
jquery ajax twitter-bootstrap
Comments
Post a Comment