jQuery clone: ​​должен ли он клонировать события уровня 0 DOM? - PullRequest
0 голосов
/ 08 января 2010

Читая книгу jQuery в действии и играя с первым примером обработки событий, я обнаружил, что 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>

1 Ответ

1 голос
/ 08 января 2010

Строка от 305 до 312 в "jQuery-1.3.2.js

«IE» копирует события, связанные через «attachEvent» при использовании «cloneNode». Вызов «detachEvent» для клона также удалит события из оригинала. Чтобы обойти это, мы используем «innerHTML». К сожалению, это означает, что некоторые модификации атрибутов в «IE», которые на самом деле хранятся только как свойства, не будут скопированы (например, атрибут name на входе).

Пример вставки не работает в IE по объясненной причине. Мы должны внести изменения в метод «клон» jQuery, чтобы иметь эту функциональность в IE

EDIT:

хорошо, извините, теперь я понимаю проблему, но из того, что я вижу и что вы можете увидеть в "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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...