我正在尝试在单击按钮上显示一个通过ajax调用生成的弹出窗口。但是我无法基于点击事件发射弹出声。我也尝试在方法上进行点击事件,但没有用。
请检查以下动态生成的代码。
$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 }
});
});
您的错误是,您尝试将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 }
});
}
});
})
});