jquery - jquery选择动态加载的div

Question

我有以下 jQuery，当它悬停在 div 上时，它会将一些 html 加载到 div 中：

$("div").hover(
    function () {
        $(this).load('htmlsnippets/divHoverButtons.txt');
    }, 
    function(){
        $("#divHoverButtons").css("visibility", "hidden");
    });

$("#setWidth").click(
    function(){
        $(this).css("visibility", "hidden");
    });

divHoverButtons.txt 包含：

<div id="divHoverButtons">
    <div id='setWidth'>Set Width</div>
</div>

所以，当任何 div 悬停在上面时，它变成：

<div>
    <div id="divHoverButtons">
        <div id='setWidth'>Set Width</div>
    </div>
</div>

问题是当我点击 div“setWidth”时，它并没有隐藏它。我究竟做错了什么？

Answer 1

您必须使用delegate()，因为您的 div #setWidth 在加载时不在 DOM 中

http://api.jquery.com/delegate/

$("body").delegate("#setWidth", "click", function() {
  $(this).hide();
});