jquery - 動的にロードされたdivを選択するjquery

Question

ホバーしたときにいくつかのhtmlをdivにロードする次のjQueryがあります。

$("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();
});