首页 > 新人求助:对于动态创建的div标签,如何实现点击上移操作

新人求助:对于动态创建的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次,想问有没有好的修改方法,或者怎么实现这上移操作。


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));
        }
    });

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

【热门文章】
【热门文章】