为什么jquery点击事件在plunker中有效，但在任何浏览器中都无效

why the jquery click event is working in plunker but not in any of the browser

本文关键字：任何 浏览器 无效 有效 事件 jquery plunker 为什么      更新时间：2023-09-26

嗨，我正在制作一个使用jquery点击事件的UI。它在plunker中工作，但在任何浏览器中都不工作。有人能告诉我为什么吗我的弹出链接是弹出链接

我的jquery代码是

var s="<span class='" + id + "'style='border: 1px Solid Black;position:absolute;height:25px;left:" + left1 + "px;background-color:" + color11 + ";width:" + k + "px'>" + name + "<div class='tooltip'><table id='jumble'><tbody><tr><th>Resource Type</th><th>Resource Category</th><th>Resources</th><th>Skills</th></tr> <tr><td>types</td><td>category</td><td>count</td><td>skills</td></tr></tbody></table></div></span>";

$('span').click(function(){
    $(this).closest("span").find(".tooltip").toggle("slow");
});

在你的html中，我只看到了一个span，所以你为什么不使用这样的东西：

$('span').click(function(){
    $(this).find(".tooltip").toggle("slow");
});

如果你有几个可点击的跨度，你可以使用：

$('span').each(function(){
    $(this).click(function(){
        $(this).find(".tooltip").toggle("slow");
    });
});

您在脚本中编写了两次$(document).ready()函数。这就是问题的根源。

感谢

通过阅读代码，不清楚是否通过javascript附加span html元素。

顺便说一句，如果您将元素附加在"DOMContentLoaded"事件（又名jQuery Document Ready）之后，则无法在其上注册任何事件侦听器，因此，您可能需要使用委托事件，此链接将对此进行解释。

看看这个例子：

jQuery(document).ready(function($) {
  var container = $('#container');
  var newElement = $('<span />', {
    text: "click on me"
  });
  
  
  window.setTimeout(function() {
    container.append(newElement);
  }, 2000);
  
  var counter = 0;
  container.delegate('span', 'click', function(event) {
    counter += 1;
    
    $('#counter').text(counter);
  });
  
  
});
#container 
{ 
    padding: 1em .5em; 
    background: lightseagreen; 
}
#container span 
{ 
    display: inline-block; 
    cursor:pointer; 
    padding: 1em .5em; 
    background: lightcoral; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="counter">0</div>
<div id="container"></div>

据我所知，您正在将span控件动态添加到页面中。对于动态生成的控件，不能使用.click（）事件绑定器。

要完成此工作，请使用如下面所示的.on（）

$('body').on('click','span',function(){
    $(this).closest("span").find(".tooltip").toggle("slow");
});
相关文章：