jQuery 追加和前置 div 和点击事件

Question

我想通过单击将 div 从一个父 div 转移到另一个父 div。

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

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

当我单击任何灰色的 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);


});

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/

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

然后，您可以在点击处理程序中删除您的两个 unbind() 方法，留下您的 with this；

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

});

a) 有效，b) 看起来更干净。

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

1. live()
2. delegate()

然而，在 jQuery 1.7 中，on() 被引入，live() 和 delegate() 在版本 1.8 中预计会被贬值（并且将最终被删除），因此，您应该将示例中我对delegate() 的使用更改为；

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

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

});