javascript - 与smallipop jquery插件一起使用时，按钮单击不会触发

我有一个应用程序，其中在弹出窗口中显示一个表（主要用于显示错误），tds之一具有一个按钮，用于抑制此错误。我的问题是当与smallipop插件结合使用时，click事件不会被触发，但是在没有smallipop插件的情况下运行时，该事件仍在运行。我不知道这是怎么回事。对于以下两种情况，我都弄不清：

的HTML

<body>
    <label>testing with smalipop</label>
  <div class="myElement" id="test" style="width:100px;height:200px;background:blue">

  </div>
</body>

var table = document.createElement('table');
for (var i = 1; i < 4; i++){
    var tr = document.createElement('tr');

    var td1 = document.createElement('td');

    var text1 = document.createTextNode('Text1');

    var btn = document.createElement("BUTTON");
    btn.className ="clickable";
    var t = document.createTextNode("CLICK ME");
    btn.appendChild(t);
    btn.addEventListener( 'click', function ( e ) {
        console.log('you clicked me');
     }, false );

    td1.appendChild(btn);
    td1.appendChild(text1);
    tr.appendChild(td1);
    table.appendChild(tr);
}

  var tooltipSpan = document.createElement('span');
  tooltipSpan.className = "smallipop-hint";
  tooltipSpan.appendChild(table);
  $("#test").append(tooltipSpan);
$('.myElement').smallipop();

小提琴与小提琴

http://jsfiddle.net/fdu9vtv0/8/

无小提琴的小提琴

https://jsfiddle.net/dzrn7rus/12/

最佳答案

干扰JavaScript可能存在问题。有时，插件会覆盖单击事件，尤其是因为smallipop在工具提示中具有用于单击行为的特殊选项（请参见例如hideOnTriggerClick），这可能是问题所在。

我发现与jQuery绑定时，侦听器仍然有效：

var table = document.createElement('table');
for (var i = 1; i < 4; i++){
    var tr = document.createElement('tr');
    var td1 = document.createElement('td');
    var text1 = document.createTextNode('Text1');

    var btn = document.createElement("BUTTON");
    btn.className ="clickable";
    var t = document.createTextNode("CLICK ME");
    btn.appendChild(t);
    $(btn).on( "click", function() {
        alert('You clicked me');
        console.log('you clicked me');
    });
    td1.appendChild(btn);
    td1.appendChild(text1);
    tr.appendChild(td1);
    table.appendChild(tr);
}
var tooltipSpan = document.createElement('span');
tooltipSpan.className = "smallipop-hint";
tooltipSpan.appendChild(table);
$("#test").append(tooltipSpan);
$('.myElement').smallipop();

这按预期工作。参见相应的jsFiddle。

至于为什么它不能与JavaScript一起使用：我不知道。您可能会研究smallipop的源代码（尽管目前看来离线）。 smallipop可能使用某些方法来覆盖其内容的click事件。

关于javascript - 与smallipop jquery插件一起使用时，按钮单击不会触发，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29019659/