Question

嗨，我正在製作一個UI，其中使用jquery點擊事件。它在蹲點工作但不在任何瀏覽器中，有人可以告訴我爲什麼我的 鏈接plunker是plunker link

和我的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"); 
}); 

Answer 1

在你的HTML我只看到了一個跨度，以便你爲什麼不使用這樣的事情：

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

如果你有幾個可以點擊的範圍你可以使用：

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

Answer 2

您正在腳本中寫入$(document).ready()函數兩次，這是導致此問題的原因。

感謝

Answer 3

通過閱讀你的代碼，如果你是通過JavaScript或不追加跨度html元素目前還不清楚。順便說一句，如果在「DOMContentLoaded」事件（也稱爲jQuery Document Ready）之後追加元素，則無法在其上註冊任何事件偵聽器，因此，您可能需要使用已解釋的委託事件在這link。

對此例子看看：

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>

Answer 4

根據我的理解，您將span動態添加到您的頁面。您不能將.click（）事件綁定器用於動態生成的控件。

爲了使這項工作使用。對（），如下圖所示

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