使用事件克隆HTML元素

Question

我有一個HTML圖像元素，如下所示：

var actionImage = $("<img></img>");
    actionImage.attr("id", getRandomString()); 
    actionImage.attr("width", "16").attr("height", "16").attr("src", "Action_normal.png");
    actionImage.attr("style", "cursor: hand;");
    actionImage.bind('mouseover', function() {
        OnMouseOver($(this).get(0));              
    });

克隆此元素時，我會松開mouseover事件。 如何確保事件也被克隆。

Answer 1

Clone使用一個布爾參數，當它為true時（不是默認值），它將保存數據和事件。 您需要$actionImage.clone(true) 。

正如@Purmou所提到的，您也可以通過on或delegate來綁定JS事件來避免此問題。

Answer 2

當將true傳遞給JQuery中的clone()方法時，事件處理程序也會被復制。 因此，只需使用$("#myElementId").clone(true) 。

Answer 3

.clone有一個[withDataAndEvents]選項，可以將其設置為true ：

withDataAndEvents

一個布爾值，指示是否應將事件處理程序與元素一起復制。 從jQuery 1.4開始，元素數據也將被復制。

資料來源： http ： //api.jquery.com/clone/

從1.0開始，這是一個選項。