jQuery添加和前置div以及单击事件

Question

当我点击其中一个div时，我希望能够将其从一个父级div转移到另一个父级div中。

请参考下面的jsfiddle页面：

http://jsfiddle.net/fb7Tq/97/

当我点击灰色的任何一个div时，我希望它可以在两个div之间移动，并将其样式更改为红色。当我再次点击红色的div时，它应该回到原来的灰色位置和样式。

如何实现这个功能？

HTML：

<div class="section1">
    <div id="1" >1</div>
    <div id="2" >2</div>
    <div id="3" >3</div>
    <div id="4" >4</div>
    <div id="5" >5</div>
    <div id="6" >6</div>
    <div id="7" >7</div>
    <div id="8" >8</div>
</div>

<div class="section2"></div>

CSS：

.section1 div{height:25px; background-color:#333; color:#FFF; border:1px solid red; margin-bottom:2px; width:50px;}

.section2 div{height:25px; background-color:red; color:yellow; border:1px solid green; margin-bottom:2px; width:150px;}

.section1{float:left; margin-right:50px;}
.section2{float:left}

以下是我的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);


});

- Murtaza

---

请问您能否在问题中包含代码？JsFiddle是一个很好的工具，可以补充您的问题并展示问题的实时预览，但是您的问题应该独立存在。由于JsFiddle经常在一天中出现故障，如果人们无法查看您的代码，则会极大地降低获得答案的机会！ - Matt

感谢amaan在这里添加代码，因为我在这里断网了。 - Murtaza

Answer 1

更改：

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

介绍

$('.section1 div').live('click', testclick);
$('.section2 div').live('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);


});

演示保持位置：http://jsfiddle.net/fb7Tq/109/

- Niels

---

它无法正常工作。这次我们必须分配一个不同的点击功能。 - sathis

更新并添加了演示。它确实有效，因为“live”函数检查“selection”中的项目，如果DIV被移动，另一个“live”函数将接管。 - Niels

很棒的答案，它按照要求正常工作，将很快在实际开发环境中实现。 - Murtaza

Answer 2

因为你的DOM是动态变化的，所以应该使用事件委托，而不是直接绑定事件处理程序到元素上。

作为一个一般规则，我无法想到任何例外，如果你有一个会改变的DOM（例如通过AJAX或在你的示例中通过编程方式），总是使用事件委托。

更改；

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

致；

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

你可以在click处理程序中删除两个unbind()方法，这样就会得到这个；

$(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);

});

这样做既能够正常工作，又更加简洁。

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

1. live()
2. delegate()

然而，在 jQuery 1.7 中，引入了on()方法，预期版本 1.8 中将停用 live() 和 delegate()（并最终删除），因此，您应该将示例中使用的 delegate() 改为：

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

- Matt

Answer 3

试试这个

http://jsfiddle.net/fb7Tq/104/

$(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);

});

- sathis

---

这不是解决问题的最佳方式；应该使用事件委托。 - Matt