对于动态创建的div标签,如何实现点击上移操作-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

对于动态创建的div标签,如何实现点击上移操作

2016-05-30 08:55:12 1740 1

动态添加div代码如下:

$(document).ready(function() {
    //设置添加column最多为6个
 
   var columnMax = 6;
    if ($('div.column').size() >= columnMax) {
        $(obj).hide();
    }
    //为img.add图标添加点击事件用于动态创建div
    $("img.add").click(function() {
        addColumn(this, columnMax);
    });
});

//栏目的动态添加及上移
function addColumn(obj, sm) {
    //div_left用于放input,div_right用于放upmove图标
    $('#config_info').prepend(
        '<div class="column">'+
            '<div class="div_left">'+
                '<p class = "p_message">'+
                '标题:'+ '<input class="copt" type="text"  placeholder="新内容" value="">'
                + '</p>'+
            '</div>'+
            '<div class="div_right">'+
                '<img src="img/arrow_up_16px.png" class="upmove" />'+
        '</div></div>');
//        //上移
//        $('#config_info').find("img.upmove").click(function(){
//            
//            var p = $(this).parent().parent('.column');
//          var index = $("#config_info > div").index(p);
//          if(index == 0){
//                 alert("已经在最上面");
//             return;
//          }
//          else{
//              $("#config_info > div").eq(index-1).before($("#config_info > div").eq(index));
//          }
//        });
        
    //栏目最多六个    
    if ($('div.column').size() >= sm) {
        $(obj).hide();
    }
};
}

注释掉上移部分代码是因为放在那里执行的话动态添加n次,点击upmove也会上移n次,想问有没有好的修改方法,或者怎么实现这上移操作。

取消 提交回答
全部回答(1)
  • 小旋风柴进
    2019-07-17 19:18:56

    将 addColumn 中的 事件绑定的代码(目前注释掉的) 删除掉,
    然后在 ready 中新增下面这样的代码:

        //上移
        $('#config_info').on('click', 'img.upmove', function(){
            var p = $(this).parent().parent('.column');
            var index = $("#config_info > div").index(p);
            if(index == 0){
                alert("已经在最上面");
                return;
            } else{
                $("#config_info > div").eq(index-1).before($("#config_info > div").eq(index));
            }
        });

    主要功能的代码没变, 只是改变了事件的绑定机制.

    0 0
2736
文章
6591
问答
问答排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载