Javascript jQuery追加和前置div并单击事件

我想在单击该div时将其从一个父div转移到另一个父div

请查看下面的JSFIDLE页面以获取参考

当我点击任何一个灰色的div时，我想把它移到另一个div框，当我点击返回到红色div时，它会以灰色样式回到原来的位置

我怎样才能做到这一点

HTML:

还有我的JavaScript：

$(document).ready(function() {
    function testclick() {
        var iLoc = $(this).attr("id");
        $('.section2').append(this);
        $('#'+iLoc).unbind('click', testclick);
    }

    function testclick2() {
        alert("s");
        var iLoc = $(this).attr("id");
        $('.section1').append(this);
        this.unbind('click', testclick2);
    }
    $('.section1 div').bind('click', testclick);
    $('.section2 div').bind('click', testclick2);


});

更改：

$('.section1 div').bind('click', testclick);
$('.section2 div').bind('click', testclick2);

进入

现在可以从函数中删除

.unbind（）

保持位置：

$(document).ready(function() {
    $('.section1 div').each(function(){
        $(this).data("pos", $(this).index());    
    });

    function testclick() {
        var node = $(this);
        var success = false;
        $('.section2 div').each(function(){
            if($(this).data("pos") > node.data("pos"))
            {
                $(this).before(node);
                success = true;
                return false;   // Jump out of loop
            }
        });

        if(!success)
        {
            $('.section2').append(node);
        }
    }

    function testclick2() {
        var node = $(this);
        var success = false;
        $('.section1 div').each(function(){
            if($(this).data("pos") > node.data("pos"))
            {
                $(this).before(node);
                success = true;
                return false;  // Jump out of loop
            }
        });

        if(!success)
        {
            $('.section1').append(node);
        }
    }
    $('.section1 div').live('click', testclick);
    $('.section2 div').live('click', testclick2);


});

保持姿势演示：

试试这个

---

因为您有一个动态变化的DOM，事件委派应该对您大喊大叫，而不是直接将事件处理程序绑定到元素

一般来说，如果您的DOM发生了变化（例如，通过AJAX或您的示例中的编程方式），我想不出例外情况，始终使用事件委派

变化

$('.section1 div').bind('click', testclick);
$('.section2 div').bind('click', testclick2);

到

然后，您可以删除单击处理程序中的两个

unbind（）

方法，这就剩下了您

其中a）有效，b）看起来更干净

jQuery在1.7之前的jQuery版本中支持两种事件委派方法，我强烈建议您阅读这两种方法的完整文档；是的，它很长，但理解这个概念至关重要

然而，在jQuery 1.7中引入了，并且

live（）

和

delegate（）

预计在版本1.8中都会贬值（最终将被删除），因此，您应该将示例中使用的

delegate（）

更改为

    $('.section1').on('click', '.section1 > div', testclick);
    $('.section2').on('click', '.section2 > div', testclick2);

---

你能把代码也包括在你的问题里吗。JSFIDLE是一个很好的工具，可以补充您的问题，并显示问题的实时预览，但是您的问题应该独立存在。JSFIDLE通常一整天都在停机，因此如果人们无法查看您的代码，您获得答案的机会就会大大降低！感谢amaan在这里添加代码，因为我在这里与internet断开连接。它无法正常工作。这次我们必须分配不同的点击功能。更新并添加了演示。它确实可以工作，因为

live

函数会检查

选项中的项目，如果DIV被移到上面，另一个
live
函数将接管。很好的答案，它按照要求工作，将很快在live开发环境中实现。这不是解决问题的最佳方法；应使用事件委派。
$(document).ready(function() {
    $('.section1 div').each(function(){
        $(this).data("pos", $(this).index());    
    });

    function testclick() {
        var node = $(this);
        var success = false;
        $('.section2 div').each(function(){
            if($(this).data("pos") > node.data("pos"))
            {
                $(this).before(node);
                success = true;
                return false;   // Jump out of loop
            }
        });

        if(!success)
        {
            $('.section2').append(node);
        }
    }

    function testclick2() {
        var node = $(this);
        var success = false;
        $('.section1 div').each(function(){
            if($(this).data("pos") > node.data("pos"))
            {
                $(this).before(node);
                success = true;
                return false;  // Jump out of loop
            }
        });

        if(!success)
        {
            $('.section1').append(node);
        }
    }
    $('.section1 div').live('click', testclick);
    $('.section2 div').live('click', testclick2);


});

$(document).ready(function() {
    function testclick() {
        var iLoc = $(this).attr("id");
        $('.section2').append(this);
       $('#'+iLoc).unbind('click', testclick).bind('click',testclick2) ;
    }

    function testclick2() {
       alert("s");
       var iLoc = $(this).attr("id");
       $('.section1').append(this);
       this.unbind('click', testclick2).bind('click',testclick) ;
    }
    $('.section1 div').bind('click', testclick);
    $('.section2 div').bind('click', testclick2);

});

$('.section1 div').bind('click', testclick);
$('.section2 div').bind('click', testclick2);

$('.section1').delegate('.section1 > div', 'click', testclick);
$('.section2').delegate('.section2 > div', 'click', testclick2);

$(document).ready(function() {
    function testclick() {
        var iLoc = $(this).attr("id");
        $('.section2').append(this);
    }

    function testclick2() {
        alert("s");
        var iLoc = $(this).attr("id");
        $('.section1').append(this);
    }

    $('.section1').delegate('.section1 > div', 'click', testclick);
    $('.section2').delegate('.section2 > div', 'click', testclick2);

});

    $('.section1').on('click', '.section1 > div', testclick);
    $('.section2').on('click', '.section2 > div', testclick2);