1

ajax呼び出しで生成されたボタンのクリックでポップオーバーを表示しようとしています。しかし、クリックイベントに基づいてポップオーバーを発生させることはできません。Jquery On メソッドでもクリックイベントを取得しようとしましたが、使用できません。

以下の動的に生成されたコードを確認してください。

$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>';

これらは、クリックイベントを発生させようとする以下のコードですが、クリックイベントは2回目のクリックで発生します。どこが間違っていますか？

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

1 に答える 1

0

あなたの間違いはdata-content、ボタンの属性に URL 値を割り当てようとすることですが、それは静的なテキストでなければなりません。ポップオーバーのコンテンツを動的に割り当てたい場合は、.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 }
                });
            }
        });
    })
});
于 2014-02-05T08:35:31.043 に答える