JavaScript克隆不起作用

Question

Look this jsfiddle https://jsfiddle.net/3o38nbzs/4/ when I clone, I can move the clone, but it does not "listen" click. https://jsfiddle.net/L5mg87jm/ when I clone, the clone is static.

At first I used Clone () and the second clone (true, true), that is the only difference.

How do I create a clone to respond to the click event?

Basically, I have trouble knowing when the User clicks on a cloned object. I tried using clone (true, true), but it still fails. When I use .clone() I can move drag the object, but the click doesn't work. When I use .clone(true,true) nothing works.

        // Clone Block
        function cloneblock(obj, event, ui) {
            var idn = Math.floor((Math.random() * 100) + 1), idt = '#' + idn;
            if (obj) {
                var block = $(selected).clone();
                block.css({ left: mouse.X + 'px', top: mouse.Y + 'px' }).attr('id', idn).removeClass('ui-draggable selected');
            } else {
                var block = $(ui.draggable).clone();
                block.css({ left: mouse.X + 'px', top: mouse.Y + 'px' }).attr('id', idn).removeClass('ui-draggable selected gblock').addClass('block');
            }
            block.children('.ui-widget-content').children('p').children('.vertexout').attr('id', 'vo' + idn);
            var exit = block.children('.ui-widget-content').children('p').children('.vertexout');
            if ($(exit).hasClass('image')) {
                $(exit).attr('id', 'v' + idn + 4);
                jsPlumb.makeSource($(exit), {
                    scope: 'image'
                });
            } else if ($(exit).hasClass('int')) {
                $(exit).attr('id', 'v' + idn + 5);
                jsPlumb.makeSource($(exit), {
                    scope: 'int'
                });
            } else if ($(exit).hasClass('float')) {
                $(exit).attr('id', 'v' + idn + 6);
                jsPlumb.makeSource($(exit), {
                    scope: 'float'
                });
            } else {
                $(exit).attr('id', 'v' + idn + 7);
                jsPlumb.makeSource($(exit), {
                    scope: 'char'
                });
            }
            var vin2 = block.children('.ui-widget-content').children('p').children('.vertexin');
            for (i = 0; i < vin2.length; i++) {
                if ($(vin2[i]).hasClass('image')) {
                    $(vin2[i]).attr('id', 'v' + idn);
                    jsPlumb.makeTarget($(vin2[i]), {
                        maxConnections: 1,
                        scope: 'image'
                    });
                } else if ($(vin2[i]).hasClass('int')) {
                    $(vin2[i]).attr('id', 'v' + idn + 1);
                    jsPlumb.makeTarget($(vin2[i]), {
                        maxConnections: 1,
                        scope: 'int'
                    });
                } else if ($(vin2[i]).hasClass('float')) {
                    $(vin2[i]).attr('id', 'v' + idn + 2);
                    jsPlumb.makeTarget($(vin2[i]), {
                        maxConnections: 1,
                        scope: 'float'
                    });
                } else {
                    $(vin2[i]).attr('id', 'v' + idn + 3);
                    jsPlumb.makeTarget($(vin2[i]), {
                        maxConnections: 1,
                        scope: 'char'
                    });
                }
            }
            block.appendTo($(container));
            jsPlumb.draggable($(idt), dragop);
            resize();
        } 

Answer 1

 var block = $(selected).clone();

clone() is shallow copy. Normally, any event handlers bound to the original element are not copied to the clone.

You must use clone(true) which will copy all the events as well.