Question

我正在尝试使用相同的代码创建和初始化多个弹出窗口。 html元素正在JS中创建 -

var panel = ('<a href="javascript://" id= "'+popId+'" data-title="xyz" >');

popId是每个值的唯一值，因此获得的ID是唯一的

接下来我调用以下函数 -

createPopOver("#"+popId,<another_arg>);

create function看起来像这样 -

function createPopOver(selector,<another_arg>) {
  $(selector).popover({
    trigger: 'click',
    placement : 'left'
  }).on('shown.bs.popover', function () {
    console.log("reached here1"+selector);
    ...
  });
}

通过控件进行调试会转到函数但不在显示的事件中，因此控制台不会打印任何内容。

如果我给id="xyz"所以现在所有的弹出框都有相同的id，第一个弹出窗口会在点击但是文本不正确时显示（要显示的内容正在创建弹出功能中计算）。

Answer 1

首先，我强烈感觉您在将元素附加到popover之前调用了createPopOver函数来初始化DOM，这将无法正常工作。因为只有当elements附加到DOM时，才能将事件附加到id。除此之外，popover无需附加class。您可以使用可以提供给多个元素的rel，也可以使用data-*或var panel = ('<a href="javascript://" id= "'+popId+'" rel="popover" data-title="xyz" >');属性。

createPopOver

现在您可以在没有selector参数的情况下编写popover函数，selector包含popover选项，您可以在其中指定选择器并附加body至function createPopOver(<another_arg>) { $('body').popover({ trigger: 'click', placement : 'left', container: 'body', selector: '[rel="popover"]', //considering rel as common attribute here }).on('shown.bs.popover', function () { console.log("reached here1"+$(this).attr('id')); ... }); }。

createPopOver

一旦panel变量的内容附加到DOM，您就可以致电localhost/part。

还有其他各种方法可供使用。有关其他选项的详细说明，请参阅 this answer 。

Answer 2

创建弹出窗口时以及初始化它们时要小心。

function createPopOver(selector,another_arg) {
   console.log(selector);
  //$(selector).popover();
  $('[data-toggle="popover"]').popover({

  }).on('shown.bs.popover', function () {
    console.log("reached here1"+selector);
  });  
}


$(document).ready(function(){
    var panel = $('<p><a href="javascript://" id= "123" data-toggle="popover" title="Popover title" data-content="And here\'s some amazing content. It\'s very engaging. Right?" >123</a></p>');
     $('body').append(panel);
     panel = $('<p><a href="javascript://" id= "234" data-toggle="popover" title="Popover title 234" data-content="And here\'s some amazing content. It\'s very engaging. Right? 234" >234</a></p>');
     $('body').append(panel);
     panel = $('<p><a href="javascript://" id= "345" data-title="xyz" >345</a></p>');
     $('body').append(panel);
     panel = $('<p><a href="javascript://" id= "456" data-title="xyz" >456</a></p>');
     $('body').append(panel);      
    createPopOver("#123",'');
    createPopOver("#234",'');
    createPopOver("#456",'');

 });

https://jsfiddle.net/v761q32b/

具有唯一ID的多个引导程序弹出窗口 - 不用于显示的事件

2 个答案: