我有一个应用程序，其中我在弹出窗口中显示一个表(主要用于显示错误)，其中一个 tds 有一个用于抑制此错误的按钮。我的问题是，当与 smallipop 插件一起使用时，点击事件没有被触发，但是在没有 smallipop 插件的情况下运行时它正在运行。我不知道这里发生了什么。对于以下两种情况，我都有 fiddle :
HTML
<body>
<label>testing with smalipop</label>
<div class="myElement" id="test" style="width:100px;height:200px;background:blue">
</div>
</body>
JS
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();
摆弄 smallipop
http://jsfiddle.net/fdu9vtv0/8/
没有 smallipop 的 fiddle
最佳答案
干扰 JavaScript 可能存在问题。有时插件会覆盖点击事件，尤其是因为 smallipop 对工具提示内部的点击行为有特殊的选项(参见示例 hideOnTriggerClick)，这可能就是问题所在。
我发现当与 jQuery 绑定(bind)时，监听器仍然有效:
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 可能使用了一些方法来覆盖其内容的点击事件。
关于javascript - 与 smallipop jquery 插件一起使用时，按钮单击不会触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29019659/