javascript - 关于Jq动态创建的div问题。

问题描述

问 题

add（）是又创建一个div，之前的div如果挪动可以把位置信息加到arr中，我现在想把新创建的div如果挪动位置也加到arr中去该怎么办呢？谢谢

var arr=[];

  $(".draggable").each(function(index) {

             $(this).dblclick(function(){
                 
                 $("#popup").show("slow")
                         
                 $("#close").click(function(){
                     
                     $("#popup").hide("slow");
                     
                     });
                 
                });    
                
             $(this).mousedown(function(e){ 
           
               }).mouseup(function(){
                 
                 var x=$(this).css("left");
                 
                 var y=$(this).css("top"); 
                 
                 var location={
                      id:index+1,
                      X:x,
                      Y:y
                    };
                    
             arr.push(location);
            
        });     
    });
                     
     function add(){
         var addDiv=$("<div><span>DM54</span></div>");
             addDiv.addClass("draggable");
             addDiv.draggable();
             $(".box").append(addDiv);
            }     
         

解决方案

1. 一般没有需要逻辑判断需求的话，这种一父多子的DOM结构，都没必要用.each()遍历绑定，直接在父元素上绑个事件代理就行了；

2. 非一次（.one()）绑定的事件处理里，尽量不要再加事件绑定，要不每次事件发生都会再绑一遍事件，太容易出bug了……真的需要动态绑定，可以用.one()执行外层事件绑定或者用信号量来控制内层事件回调的执行；

3. 之前写的是绑到mouseup上的，我理解为后边这个后加的也是如此？

4. 另外由于用的是事件代理，你新加的DOM结构应该不用绑事件……

5. 适当写点链式调用有助于提升性能，多看看文档、了解新的写法有好处。

---

给个我的理解：

var arr=[];

function add(){
    var addDiv=$("<div><span>DM54</span></div>");
    addDiv.addClass("draggable");
    addDiv.draggable();
    $(".box").append(addDiv);
}

$('.box')
    .on('dblclick', '.draggable', function() {
        $("#popup").show("slow")
    })
    .on('mouseup', '.draggable', function(){
        var cache = $(this).css(['top','left']); 
        var location={
            id: $(this).index() + 1,
             X: cache.top,
             Y: cache.left
        };
        arr.push(location);
    })
    .on('click', '#close', function(){
        $("#popup").hide("slow");
    });

这篇关于javascript - 关于Jq动态创建的div问题。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！