Jquery UI Sortierbar funktioniert nicht im dynamischen Container

Question

Ich habe einen Container, wo ich dynamisch Abschnitte hinzufügen, ich erstelle Artikel innerhalb des Abschnitts, der sortierbar sein sollte, aber Jquery sortierbar funktioniert nicht innerhalb dynamisch erstellten Containern, wenn ich die Container geben statisch funktioniert es, Kann jemand bitte ein solution.Thanks

https://jsfiddle.net/anubala/7ut5wk3j/1/

HTML teilen:

<div class='row page-layout'> 
     <div class='col-md-10 col-md-offset-1' > 
     <div class="add_section_div"> 
      <p>Add section</p> 
     </div> 
     <div id="contents"> 
     </div> 
     </div> 
    </div> 

JavaScript:

$(".wrap_body").sortable(); 
$(".add_section_div").on("click", function() { 
    var $section = "<div class='section_div'><div class='div_header clearfix'><p class='pull-left'>Add Wrap</p></div><div class='section_body div_body'></div></div>"; 
    $("#contents").append($section); 

}) 
$("body").on("click", ".section_div>.div_header", function() { 
    var $wrap = "<div class='wrap_div'><div class='div_header clearfix'><p class='pull-left'>Add Item</p></div><div class='wrap_body div_body clearfix'></div></div>"; 
    $(this).parent().find('.section_body').append($wrap); 
}) 
const regex = /^.*-\s*(.*)$/; 
$("body").on("click", ".wrap_div>.div_header", function() { 
    var $item1 = "<div class='drag col-sm-"; 
    var $item2 = "'><div class='item_div'><div class='div_header clearfix'><p class='pull-left'><span class='minus'><i class='fa fa-minus'></i></span><span class='plus'><i class='fa fa-plus'></i></span></p><p class='pull-left header_text'>"; 
    var $item3 = "</p></div><div class='div_body'></div></div></div>"; 
    var length_item = $(this).parent().find(".wrap_body .item_div").length; 
    var count = 0; 
    for (i = 0; i < length_item; i++) { 
     if ($(this).parent().find(".wrap_body>div:eq('" + i + "')")) { 
      console.log($(this).parent().find(".wrap_body>div:eq('" + i + "')")) 
      var col_count_text = $(this).parent().find(".wrap_body>div:eq('" + i + "')").attr('class'); 
      count += parseInt(find_col_count(col_count_text)); 

     } 
    } 
    var current_col_count = 12 - (count % 12); 
    if (count < 12) { 
     $(this).parent().find('.wrap_body').append($item1 + current_col_count + $item2 + "col-sm-" + current_col_count + $item3); 
    } 
}) 


function find_col_count(col_text) { 
    var col_count = regex.exec(col_text); 
    col_count.forEach((match, groupIndex) => { 
     count1 = match; 
    }); 
    return count1; 
} 
$("body").on("click", ".plus", function() { 
    var $parent = $(this).parent().parent().parent().parent(); 
    var col_count_text = $parent.attr('class'); 
    var length_item = $parent.parent().find(".item_div").length; 
    var count = 0; 
    for (i = 0; i < length_item; i++) { 
     if ($parent.parent().find(".item_div:eq('" + i + "')").parent()) { 
      var col_count_text = $parent.parent().find(".item_div:eq('" + i + "')").parent().attr('class'); 
      count += parseInt(find_col_count(col_count_text)); 
     } 
    } 
    var col_count_text = $parent.attr('class'); 
    var col_count = find_col_count(col_count_text); 
    if (count < 12) { 
     var col_count_new = "col-sm-" + (++col_count); 
     var col_count_drag = "drag " + col_count_new; 
     $parent.attr("class", col_count_drag); 
     $parent.find(".header_text").html(col_count_new); 
    } 
}); 
$("body").on("click", ".minus", function() { 
    var $parent = $(this).parent().parent().parent().parent(); 
    var col_count_text = $parent.attr('class'); 
    var col_count = find_col_count(col_count_text); 
    if (col_count > 1) { 
     var col_count_new = "col-sm-" + (--col_count); 
     var col_count_drag = "drag " + col_count_new; 
     $parent.attr("class", col_count_drag); 
     $parent.find(".header_text").html(col_count_new); 
    } 
}); 

Answer 1

Sie haben wahrscheinlich die Lösung bereits gefunden können, aber dieses Problem zu lösen, brauchen Sie nur diese Zeile zu bewegen

$(".wrap_body").sortable(); 

Dorthin, wo Sie tatsächlich die .wrapper_body an die body als anhängen folgende :

$("body").on("click", ".section_div>.div_header", function() { 
     var $wrap = "<div class='wrap_div'><div class='div_header clearfix'><p class='pull-left'>Add Item</p></div><div class='wrap_body div_body clearfix'></div></div>"; 
     $(this).parent().find('.section_body').append($wrap); 
     $(".wrap_body").sortable(); 
    }); 

Dies sollte Ihr Problem lösen. Siehe JsFiddle