javascript - 关于Jq动态创建的div问题。
PHP中文网
PHP中文网 2017-04-11 13:09:55
[JavaScript讨论组]

add()是又创建一个p,之前的p如果挪动可以把位置信息加到arr中,我现在想把新创建的p如果挪动位置也加到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 addp=$("

DM54

"); addp.addClass("draggable"); addp.draggable(); $(".box").append(addp); }
PHP中文网
PHP中文网

认证0级讲师

全部回复(2)
PHP中文网
  1. 一般没有需要逻辑判断需求的话,这种一父多子的DOM结构,都没必要用.each()遍历绑定,直接在父元素上绑个事件代理就行了;

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

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

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

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


给个我的理解:

var arr=[];

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

$('.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");
    });
PHPz

dblclick 和 mousedown 函数提取一下,在add()函数中再绑定一遍。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号