javascript - 无法将动态创建的嵌套 div 从一个 div 移动到另一个 div

Question

我根据父 div 内的输入创建了一些动态 div。

现在我想做的是，如果我单击这些创建的 div 之一，它应该移动到其他父 div，反之亦然。

我的代码:

/*Html code*/

<input type="text" id="txtName" />
<input type="button" value="ok" id="btnSave" />
<div id="firstDiv">
<div id="1" class="a">Value</div>(Working over statically created div  )
</div>
<br>
--------------
--------------
-------------
<br>
<div id="SecondDiv">
<div id="4" class="b"> 
</div>
</div>

和 JavaScript 代码:

  $(document).ready(function() {
  $('#btnSave').click(function() {
  addDiv($('#txtName').val());
  $('#txtName').val('');
  });
  $("div.a").on("click", function() {
  var $this = $(this);
 if ($this.hasClass("a")) {
    $this.removeClass("a").addClass("b").prependTo("#firstDiv");
 } else {
    $this.removeClass("b").addClass("a").prependTo("#SecondDiv");
 }
 });   

});

function addDiv(name) {
var container = $('#firstDiv ');
$('<div />', {class:'a',text:name }).appendTo(container).after("<br/>");
}

但代码仅适用于已创建的 div。我对此进行了测试，但它不适用于动态创建的 div。

我想要的是我可以动态创建子 div 并在单击时将其移动到另一个 div。

一个Sample Fiddle还添加了

Answer 1

尝试:

$(document).ready(function() {
        $('#btnSave').click(function() {
            addDiv($('#txtName').val());
            $('#txtName').val('');
        });
         allowToggleDivLocation("div.a");
    });
    
    function allowToggleDivLocation(a){
        $(a).on("click", function() {
            var $this = $(this);
            if ($this.hasClass("a")) {
                $this.removeClass("a").addClass("b").prependTo("#firstDiv");
            } else {
                $this.removeClass("b").addClass("a").prependTo("#SecondDiv");
            }
        });
    }
    
    function addDiv(name) {
        var container = $('#firstDiv '),
            c = $('<div />', {class:'a',text:name });
        allowToggleDivLocation(c);
        c.appendTo(container).after("<br/>");
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txtName" />
<input type="button" value="ok" id="btnSave" />
<div id="firstDiv">
<div id="1" class="a">Value</div>(Working over statically created div  )
</div>
<br>
--------------
--------------
-------------
<br>
<div id="SecondDiv">
<div id="4" class="b"> 
</div>
</div>

没有测试它，但它应该可以工作。

$(document).ready(function() {
        $('#btnSave').click(function() {
            addDiv($('#txtName').val());
            $('#txtName').val('');
        });
         allowToggleDivLocation("div.a");
    });
    
    function allowToggleDivLocation(a){
        $(a).on("click", function() {
            var $this = $(this);
            if ($this.hasClass("a")) {
                $this.removeClass("a").addClass("b").prependTo("#firstDiv");
            } else {
                $this.removeClass("b").addClass("a").prependTo("#SecondDiv");
            }
        });
    }
    
    function addDiv(name) {
        var container = $('#firstDiv '),
            c = $('<div />', {class:'a',text:name });
        allowToggleDivLocation(c);
        c.appendTo(container).after("<br/>");
    }

<input type="text" id="txtName" />
<input type="button" value="ok" id="btnSave" />
<div id="firstDiv">
<div id="1" class="a">Value</div>(Working over statically created div  )
</div>
<br>
--------------
--------------
-------------
<br>
<div id="SecondDiv">
<div id="4" class="b"> 
</div>
</div>