CODEWITHSUNDEEP
jqueryajaxtwitter-bootstrap
Nistor Cristian
Nistor Cristian

Reputation: 1266

Buttons inside Bootstrap Popover are not triggered

I'm tring to trigger some buttons inside a popover that is loaded with ajax but I couldn't find a solution. Here is what I tried:

Popover loaded with 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>';
        });
        return toReturn; 
    }
});

And this is what I tried to trigger a link from the 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 be great. Thank you.

Upvotes: 0

Views: 1474

Answers (2)

Wesley Smith
Wesley Smith

Reputation: 19571

Chain .parent().delegate() after the call to .popover() like this:

$('.item-instances').popover({
  trigger: 'click',
  placement: 'bottom',
  title: 'Title',
  html: true,
  content: function() {

    var toReturn = [];
    // commented out for demo
    //$.each(itemInstances($(this)), function(k, v){
    //toReturn[k] = '<a href="#" class="instance-image-'+ v.image_id +'">Abc</a>';
    //});
    //return toReturn; 
    return '<a href="#" class="">Click ME</a>'
  }
}).parent().delegate('a', 'click', function() {
  event.preventDefault();
  alert('test');
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<br>
<br>

<div class="bs-example">
  <button id="my_awesome_element" type="button" class="btn btn-primary item-instances" data-toggle="popover" title="Popover title">Popover</button>

</div>

Upvotes: 2

Tomanow
Tomanow

Reputation: 7367

You may be binding it multiple times, you can use unbind() and do something like this:

$('.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>';
        });
        return 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);

// for example
$(document).on('shown.bs.popover', reBindListeners);
<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 I modified your content slightly since I do not have your functions / data.

Upvotes: 1

Related Questions