Question

大家好我想尝试通过ajax调用生成点击按钮来显示弹出窗口。但是我无法根据点击事件触发popover。我试图在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的内容，则必须在.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 }
                });
            }
        });
    })
});

Twitter Bootstrap Popover没有通过Ajax调用处理动态生成的内容

1 个答案: