Question

我有页面，DIV的内容由.post请求填充，项目为<div data-toggle="popover" ....><a><img></a></div>，这部分工作正常。但是当我尝试之后通过选择[data-toggle =＆＃34; popover＆＃34;]来激活popover时，jquery返回＆＃34; []＆＃34;任何想法我做错了什么？（代码被剪切只是为了显示主要想法）。

<script>
    function updateGallery() {

        $.post('/images/?action=list', '', function (data) {

            for (var item in data.result) {

                gallery_dom += '
<div data-toggle="popover" data-placement="bottom" title="'+ item.size +'">'+
'<a class="thumbnail">'+
'<img id="gal-' + item.id + '" class="image" big="'+item._big+'" src="' + item._src + '"></a></div>';

                } // for

$('#gallery-list').empty();
$('#gallery-list').html(gallery_dom);
}

}

</script>

<div id="gallery-list"></div>


<script>
$(function(){

updateGallery();

console.log($('[data-toggle="popover"]));
</script>

Answer 1

您需要在ajax popover回调中激活success。您可以确定新内容已添加到DOM中。也许就在$('#gallery-list').html(gallery_dom);功能内updateGallery()之后。

尝试在该行之后放置console.log($('[data-toggle="popover"]);。

Answer 2

如果要测试Gallery是否已正确更新，可以使用临时HTML元素（DIV，按钮等）并为其附加事件处理程序。例如，您可以使用以下HTML

<div id="gallery-list"></div>
<div id="testGallery">Click here to test Gallery</div>

并使用此JS允许控制台正确记录结果（一旦您看到图库已更新）。

$('#testGallery').click(function(){
            console.log($('[data-toggle="popover"]'));    
});

或者，您可以使用全局标记（不是我最喜欢的工具，但它可以工作）或其他一些机制让您的代码知道图库已更新。在发送AJAX请求之前，您将标志设置为“未更新”，当它完成（“完成”回调）时，将其设置回“已更新”。

Answer 3

要执行此操作，您需要将函数作为参数传递：

1°步骤 你想在$ .post（）之后执行什么功能？

function afterPost() {
    console.log( $('[data-toggle="popover"]') );
}

2°步骤： 在函数中引用它作为参数，并在$ .post（）之后调用它：

function updateGallery( callback ) {
    $.post('/images/?action=list', '', function (data) {
         /*
             ...
         */
         callback();
    }
}

3°步骤，最后： 使用它！

$(function(){
    updateGallery( afterPost );
})

**希望它有所帮助！ **

$（'[data-toggle =“popover”]'）什么都不选

3 个答案: