Bootstrap Popover內部的按鈕不會被觸發

Question

我正在觸發使用ajax加載的popover中的某些按鈕，但找不到解決方案。這裏是我的嘗試：

酥料餅裝有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; 
    } 
}); 

而這正是我試圖觸發來自酥料餅的鏈接：

$(document).ajaxComplete(function() { 
    $('a[class^="instance-image-"]').each(function(index, el) { 
     $(this).on('click', function(event) { 
      event.preventDefault(); 
      console.log('test'); 
     }); 
    }); 
}); 

任何建議對子級是巨大的。謝謝。

Answer 1

你可能會多次綁定，你可以使用unbind()，做這樣的事情：

$('.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>

注意：由於我沒有你的函數/數據，所以我稍微修改了你的內容。

Answer 2

鏈.parent().delegate()調用.popover()這樣後：

$('.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>