Jquery Selector錯誤，無法選擇單擊事件上的元素

Question

我想做一個短名單框，用戶將從一個框中選擇元素，它會顯示在下一個框中，當用戶點擊元素是入圍名單，該元素將從列表中消失，一切正常，但當我點擊入圍的元素時出現問題。不知道爲什麼。

下面是代碼：

HTML：

<div id="secondbox"> 
    <div class="elements"> 
     Soni 
    </div> 
    <div class="elements"> 
     Soni1 
    </div> 
    <div class="elements"> 
     Soni2 
    </div> 
    <div class="elements"> 
     Soni3 
    </div> 
</div> 

JQ：

$(".pink").click(function() 
    { 
     //$(this).remove(); 
     alert("Hi"); 
    }); 
    $(".elements").click(function() 
    { 
     if($(this).attr("class")=="elements") 
     { 
      $(this).clone().appendTo("#firstbox").addClass("pink"); 
      $(this).addClass("red"); 
     } 
    }); 

CSS：

#secondbox,#firstbox{float:left;height:300px;width:300px;border:1px solid black;} 
.elements{width:90%;margin:5px;border:1px dashed orange;} 
.red{background-color:#d5d5d5;} 
.pink{background-color:#BCED91;} 

Plea

Answer 1

由於您在第二個列表中動態創建這些元素，因此您需要使用.on()來綁定click事件。

$(document).on('click',".pink",function() { 
    $(this).remove(); 
    alert("Hi"); 
}); 

jsFiddle example

每該文檔上.on()：

的事件處理程序僅結合到當前選擇的元素;在代碼調用.on（）時，頁面上必須存在 。 要確保元素存在並且可以選擇，請在頁面上的HTML標記中的 HTML標記中對元素執行文檔就緒處理程序內的事件 綁定。如果新頁面被注入頁面， 選擇元素並附加事件處理程序，當新的HTML被放置到頁面中時，頁面中的內容爲 。