Question

我使用Bootstrap显示一个弹出窗口，直到下面的所有代码都正常。

$(".emoticons").popover({
    html : true, 
    placement : 'bottom',
    animation : true,
    delay: { show: 100, hide: 500 },
    content: function() {return $('.emoticonimg').html();
    }
});

我只需要通过ajax加载页面内容，然后我更改了代码，因为当我动态加载内容时，我需要委托事件，更改代码，它看起来像这样：

$('body').on('click','.emoticons',function()
{
 $(".emoticons").popover({
    html : true, 
    placement : 'bottom',
    animation : true,
    delay: { show: 100, hide: 500 },
    content: function() {return $('.emoticonimg').html();
    }
 });
});

现在我的烦恼开始了。但是，当我第一次点击它时，代码无效，因此当我在链接上多次单击时，它可以正常工作。怎么办？

Answer 1

它第一次不起作用，因为第一次点击是否会触发绑定弹出窗口的正文onclick处理程序。

在$（document）.ready（）函数中尝试这样的事情。

$(".emoticons").click(function(){

  $(this).popover({
    html : true, 
    placement : 'bottom',
    animation : true,
    delay: { show: 100, hide: 500 },
    content: function() {return $('.emoticonimg').html();
    }
 });

});

Answer 2

当您点击.emoticons并执行popover功能时，正在发生的事情是，您正在将其绑定到您的点击。这就是为什么它第一次没有工作的原因，但事后却有效。之后它会开始收听click事件。

理想情况下，解决方案是在加载新内容时（在AJAX回调上）运行.popover函数。

如果您只想复制粘贴我的代码并查看它是否有效，您可以这样做：

$('body').on('click','.emoticons',function()
{
// Convert this element into a popover and then display it
 $(this).popover({
    html : true, 
    placement : 'bottom',
    animation : true,
    delay: { show: 100, hide: 500 },
    content: function() {
      return $('.emoticonimg').html();
    }
 }).popover('toggle');
});

但是，我不会特别推荐这段代码，因为每次点击它都会重新初始化你的popover。

如果在AJAX请求完成后绑定所有弹出窗口，那就更好更清楚了：

$.ajax( "BlaBlaBla.php" )
  .done(function() {
    // Convert all emoticons to popovers
    $(".emoticons").popover({
        html : true, 
        placement : 'bottom',
        animation : true,
        delay: { show: 100, hide: 500 },
        content: function() {
           return $('.emoticonimg').html();
        }
     });
  });

通过ajax重新加载页面内容时，jQuery不起作用

2 个答案: