複製HTML並保留事件

我希望克隆一個元素（#clone）的innerhtml並將其插入到另一個元素（#newLocation）中。複製HTML並保留事件

使用clone（）的問題是，我將首先刪除#newLocation中的當前元素（如果有），然後遍歷#clone中的每個元素並將其追加到#newLocation。不是世界末日，而是希望更簡單的方式。

相反，我想我會使用HTML（）。由於這不會保留事件，因此我必須委派甚至使用ON。我曾認爲這項工作有效，但事實並非如此。

任何建議我做錯了什麼？另外，即使我可以使用html（）解決方案，使用clone（）解決方案會更有效率嗎？

謝謝

編輯。剛剛寫了我的第一個插件.http：//jsfiddle.net/Wnr65/似乎工作。好主意使用？當然可以寫得更好。由於

$(document).ready(function(){ 
    $("#cloneIt").click(function(){$('#newLocation').cloneInnerHtml('clone').css('color', 'red');}); 
    $("#clone a").click(function(){alert("click");}); 
    $("#clone select").change(function(){alert("change");}); 
}); 

(function($){ 
    $.fn.cloneInnerHtml = function(id) { 
     this.empty(); 
     var $t=this; 
     $('#'+id).each(function() {$t.append($(this).clone(true));}); 
     return this; 
    }; 
})(jQuery); 


<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Clone INNERHTML</title> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" language="javascript"></script> 
<script type="text/javascript"> 

$(document).ready(function(){ 
    $("#cloneIt").click(function(){$('#newLocation').html($('#clone').html());}); 

    //Only works on original clone 
    $("#clone a").on("click", function(){alert("click");}); 
    $("#clone select").on("change", function(){alert("change");}); 

    //Doesn't work at all 
    $("#newLocation a").on("click", function(){alert("click");}); 
    $("#newLocation select").on("change", function(){alert("change");}); 

}); 

</script> 

</head> 
<body> 
<input type="button" value="Clone it" id="cloneIt" /> 

<p>Original clone is shown below</p> 
<div id="clone"> 
<a href="#">Click Me</a> 
<select><option>Hello</option><option>Goodby</option></select> 
</div> 
<hr /> 
<p>Insert new clones below.</p> 
<div id="newLocation"> 
<p class="someOldElement">someOldElement</p> 
</div> 

</body> 
</html>

來源

2012-04-25 user1032531

一起復制可以創建[jsfiddle.net]（HTTP：/ /jsfiddle.net）？ – Jakub 2012-04-25 14:16:01

你想要做什麼？複製元素？或者移動元素？ – pomeh 2012-04-25 14:31:46

@Jakup http://jsfiddle.net/t8Knk/ – user1032531 2012-04-25 14:50:43

這是正常的，只要你想你的代碼不發生反應。當你做

$("#clone a").on("click", function() { 
    alert("click"); 
});

將click事件綁定到#clone a選擇匹配該元素。這些元素是在執行時刻確定的。在你的情況下，這條線將事件綁定到頁面中的第一鏈接和唯一鏈接。

該規則同樣適用於代碼

$("#newLocation a").on("click", function() { alert("click"); });

但這裏的區別在於，在執行的那一刻，有內#newLocation沒有a元素，所以選擇爲空和處理程序沒有任何約束。

然後，當你做

$('#newLocation').html($('#clone').html());

它將從一個元素獲取HTML內容，並將其複製到另一個元素，但它只是關於HTML內容，因此事件結合仍然和以前一樣的「複製操作「。

的方法上有不同的語法，只有一個允許事件代表團：

// get all current "a" elements inside the "#clone" // and bind the click event $("#clone a").on("click", handler); // get the "#clone" element, bind a click event to it // BUT trigger the event only when the origin of the event is an "a" element // here the event delegation is enabled // it means that future "a" elements will trigger the handler $("#clone").on("click", "a", handler); // if you want it to work with your code // you could do something like below // this add a click handler to all present and future "a" elements // which are inside "#clone" or "#newLocation" // but this is not the recommended way to do this, check below the clone method $("#clone, #newLocation").on("click", "a", handler);

clone方法不刪除的元素，這裏是一個工作演示http://jsfiddle.net/pomeh/G34SE/

HTML代碼

<div class="source"> <a href="#">Some link</a> </div> <div class="target"> </div>

CSS代碼

div { width: 100px; height: 25px; } .source { border: solid red 1px; } .target { border: solid blue 1px; }

Javascript代碼

var $element = $("a"), $target = $(".target"), $clone; $element.on("click", function(ev) { ev.preventDefault(); console.log("click"); }); $clone = $element.clone(true); $clone.appendTo($target);

該方法還接收一個參數指示是否事件處理程序應與元件http://api.jquery.com/clone/

來源

2012-04-25 14:37:54 pomeh

很好的答案！ – user1032531 2012-04-25 15:14:30

那麼，你會用什麼解決方案？這是否幫助你克隆你'克隆'不工作的問題？ – pomeh 2012-04-25 15:36:21

Jonathan建議的解決方案相同。 $（「#clone」）.on（「click」，「a」，handler）;而不是$（「#clone a」）.on（「click」，handler）;你剛剛有一個更教育的答案。感謝您的幫助！ – user1032531 2012-04-26 01:40:09

編輯：我得到了它與.on工作這裏有一個fiddle。還檢查了jQuery API for .on，並採取看看「直接和委託的事件」部分

$("#clone a").on("click", function(){alert("click");}); 
$("#clone select").on("change", function(){alert("change");}); 

$("#newLocation").on("click", "a", function(){alert("click");}); 
$("#newLocation").on("change", "select", function(){alert("change");});

來源

2012-04-25 14:22:20 Jonathan

自從jQuery 1.7 http://api.jquery.com/live/已經棄用'live'。你應該使用'on'方法或'委託'方法更舊的版本 – pomeh 2012-04-25 14:25:22

是的，我知道，但由於某種原因，不工作。活的表現稍差，但它會奏效。 – Jonathan 2012-04-25 14:26:51

但是應該on（）工作？任何理由？ – user1032531 2012-04-25 14:29:54

複製HTML並保留事件

回答

相關問題