jQuery克隆：它應該克隆DOM級別0事件嗎？

在閱讀本書中的jQuery in Action和處理第一個事件處理示例時，我發現jQuery不會一致地克隆DOM Level 0事件。它克隆內聯事件，但不包括那些定義爲屬性的事件。阻止使用內聯事件處理程序可能是件好事，但是是否有意設計？什麼是想從遺留頁面克隆一些東西？jQuery克隆：它應該克隆DOM級別0事件嗎？

下面是本書中給出的例子的一個變化，以說明行爲。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
    <title>DOM Level 0 Events Example</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"> 
    </script> 
<script type="text/javascript"> 
    $(function(){ 
    $('#testElement')[0].onclick = function(event) { 
     say(this.id + ' Click ASSIGN [DOM 0]'); 
    } 
      $('#testElement').click(function() { say(this.id + ' Click JQUERY [DOM 2]');}); 
      $('#testElement').clone(true).attr('id',"clonedElement").insertAfter($('#testElement')); 
    }); 

    function say(text) { 
    $('#console').append('<div>'+text+'</div>'); 
    } 
    </script> 
    </head> 

    <body> 
    <div id="testElement" style="border: solid brown 1px; margin: 10px; width : 100px; height: 100px;" onclick="say(this.id + ' Click INLINE [DOM 0]')">&nbsp;</div> 
<div id="console"></div> 
</body> 
</html>

來源

2010-01-08 Dave.Sol

線305至312中的「jQuery的1.3.2.js

「」當使用「cloneNode」。調用「detachEvent在克隆的attachEvent」 IE「通過結合複製事件」也將除去來自orignal的事件爲了解決這個問題，我們使用了「innerHTML」，不幸的是，這意味着在「IE」中對實際只存儲爲屬性的屬性的一些修改不會被複制（例如name屬性在on一個輸入）

因爲解釋原因，在IE中不能工作的例子我們應該修改jQuery的「克隆」方法t Ø在IE瀏覽器具有此功能

編輯：

好吧，我很抱歉，現在我明白了這個問題，但是從我所看到的，哪些是你可以查看「clonedElement_2」是的「限制cloneNode」。我唯一能想到的就是改變「jQuery」的方法「克隆」

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
    <script language="JavaScript"> 

     (function($){ 

      $.fn.__extendClone = $.fn.clone; 
      $.fn.clone = function(events){ 

       var ret = $(this).__extendClone(events); 

       if (events){ 

        var listEvents = ["onabort", "onblur", "onchange", "onclick", "ondblclick", "onerror", "onfocus", 
         "onkeydown", "onkeypress", "onkeyup", "onload", "onmousedown", "onmousemove", "onmouseout", 
         "onmouseover", "onmouseup", "onreset", "onresize", "onselect", "onsubmit", "onunload"]; 

        for (var inde in listEvents){ 
         if ($.isFunction($(this)[0][listEvents[inde]])){ 
          $(ret)[0][listEvents[inde]] = $(this)[0][listEvents[inde]]; 
         } 
        } 
       } 

       return ret; 

      }; 

     })(jQuery);  

     $(function() 
     { 
      //work 
      var mytestElement = document.getElementById("testElement") 
      mytestElement.setAttribute("style", "border: solid green 2px; margin: 10px; width : 100px; height: 100px;"); 

      //don't twork 
      $('#testElement')[0].onclick = function(event) { 
       say(this.id + ' Click ASSIGN [DOM 0]'); 
      } 

      $('#testElement').click(function() { say(this.id + ' Click JQUERY [DOM 2]');}); 

      //clone jquery 
      $('#testElement').clone(true).attr('id',"clonedElement").insertAfter($('#testElement')); 

      //clone js 
      var myNode = document.getElementById("testElement").cloneNode(true); 
      myNode.setAttribute("id", "clonedElement_2"); 
      myNode.setAttribute("style", "border: solid blue 2px; margin: 10px; width : 100px; height: 100px;"); 
      document.getElementById("container").appendChild(myNode); 

     }); 

     function say(text) { 
      $('#console').append('<div>'+text+'</div>'); 
     } 

    </script> 
</head> 
<body> 
    <div id="testElement" style="border: solid brown 2px; margin: 10px; width : 100px; height: 100px;" onclick="say(this.id + ' Click INLINE [DOM 0]')">&nbsp;</div> 
    <div id="container"></div> 
    <div id="console"></div> 
</body> 
</html>

來源

2010-01-08 17:08:35

它也不是真的在非IE瀏覽器中工作。內聯事件處理程序被賦值onclick = ....覆蓋，但內聯事件處理程序，而不是屬性分配被複制到FF和chrome中的克隆。 – 2010-01-08 19:12:04

我編輯答案 – 2010-01-08 20:59:17

感謝您的解決。我想知道是否應該將這個錯誤提交給好的jQuery人員。 – 2010-01-08 21:11:44

jQuery克隆：它應該克隆DOM級別0事件嗎？

回答

相關問題