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>

Answer 2

使用$("div.a").on("click", function() {});代替$(document).on("click","element", function() {});

$("element")会看到添加到DOM的所有内容

ACCESS_NOTIFICATION_POLICY只能在加载jquery代码时看到DOM中已有的内容。

更新了jsfiddle：http://jsfiddle.net/2kgu38am/7/

Answer 3

尝试使用

from .business_detection import BusinessDetector

这将允许将事件附加到任何动态创建的$(document).on('click', 'div.a', function(){ ... });元素。

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

3 个答案: