Twitter Bootstarp Popover無法通過Ajax調用動態生成的內容

Question

嗨！我想通過ajax調用生成按鈕單擊時顯示彈出窗口。但我不能根據點擊事件觸發彈出窗口。我試圖在Jquery On方法上使用click事件，但沒有用。

請檢查以下動態生成的代碼。

$html = '<div class="hero-unit well"> 
       <legend>Manage Products<div class="pull-right"> 
       <a href="createProduct.php"><button class="btn btn-info active"><i class="icon-white icon-plus"></i> Add New Product</button></a></div></legend> 
       <div class="container-fluid"> 
        <div class="hero-unit" style="background-color:white"> 
         <div class="row-fluid" id="inputProducts"> 
         <table id="tabledata" class="table table-striped well" style="font-size:12px" > 
          <thead> 
           <tr> 
            <th>#</th> 
            <th>Product</th> 
            <th>Product Name</th> 
            <th>Tags</th> 
            <th>Unit Price</th> 
            <th>Discount</th> 
            <th>timestamp</th>'; 
            if($_SESSION['ystoreau']['role_id'] == 1) { 
            $html .='<th></th> 
            <th></th>'; 
            } 
          $html .='<th></th> 
           </tr> 
          </thead> 
          <tbody>'; 
          foreach($products as $key => $p) 
          { 
           $no = $key+1; 
           $html .='<tr> 
              <td>'.$no.'</td> 
              <td>'.$p['product'].'</td> 
              <td>'.$p['product_name'].'</td> 
              <td>'.$p['product_tags'].'</td> 
              <td>'.$p['amount'].'</td> 
              <td>'.$p['discount'].'</td> 
              <td>'.date('d-M-Y H:i:s',strtotime($p['timestamp'])).'</td> 
              <td><a href="editProduct.php?product_id='.$p["product_id"].'"><button class="btn btn-warning active"><i class="icon-white icon-pencil"></i> Edit</button></a></td> 
              <td><a href="delete.php?product_id='.$p["product"].'"><button class="btn btn-danger active"><i class="icon-white icon-remove"></i> Delete</button></a></td> 
              <td><button class="activate" id="'.$p['product_id'].'" data-placement="top" data-content="http:/store.com/index.php?product_id='.base64_encode($p['product_id']).'&country='.$p['country_name'].'" data-original-title="Product Url"><i class="icon-black icon-comment"></i> URL</button></td> 
             </tr>'; 
          } 
        $html .='</tbody> 
         </table></div></div></div></div>'; 

這些是下面的代碼，我嘗試觸發點擊事件，但點擊事件正在點擊第二次點擊。請指導我錯在哪裏？

$(document).on('click', '.activate', function() { 
    $(this).popover({ 
     delay: { show: 100, hide: 100 } 
    }); 
}); 

Answer 1

你的錯誤是，試圖URL值分配給按鈕的data-content屬性，而應該是一個靜態文本。如果要動態分配彈出窗口的內容，則必須將其作爲.popover()上下文方法中的選項進行傳遞。

不知怎的，像這樣：

HTML：

<td><button class="activate" id="'.$p['product_id'].'" data-placement="top" data-content-url="http:/store.com/index.php?product_id='.base64_encode($p['product_id']).'&country='.$p['country_name'].'" data-original-title="Product Url"><i class="icon-black icon-comment"></i> URL</button></td> 

JS：

$(document).ready(function(){ 
    $('button.activate').each(function() { 
     $.ajax({ 
      url: $(this).data('content-url'), 
      dataType: 'text', 
      success: function(txt) { 
       $(this).popover({ 
        content: txt, 
        delay: { show: 100, hide: 100 } 
       }); 
      } 
     }); 
    }) 
});