开发者社区> 问答> 正文

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

动态添加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次,想问有没有好的修改方法,或者怎么实现这上移操作。

展开
收起
小旋风柴进 2016-05-30 08:55:12 2453 0
1 条回答
写回答
取消 提交回答
  • 将 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));
            }
        });

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

    2019-07-17 19:18:56
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载