Поля формы внутри sortable li не работают

Question

Я создал некоторый sortable li и внутри каждого li есть форма, которая отображается по щелчку кнопки. все работает отлично, за исключением полей формы внутри этих ли не работают, но да, когда мы нажимаем на них, они начинают нормально функционировать. Нажмите здесь для live demo.

 $(function() { 
     $("#sortable").sortable({ 
      placeholder: "ui-state-highlight" 
     }); 
     $("#sortable").disableSelection(); 

     var fieldsCount = $(".remove").length; 
     $(".btn").click(function (e) { 

      e.preventDefault(); 

      if(fieldsCount){ 
       number = $('ul#sortable li:last').attr("id"); 
       fieldsCount++; 
       $("#sortable").append('<li id ="'+fieldsCount+'" class="ui-state-default"><a class="remove ui-icon hello'+fieldsCount+'">remove</a><span class="ui-icon down_arrow"></span>row '+fieldsCount+' <div class="toggle_div" id="toggle_div"><div class="field_left" id="field_left"><input type="text" name="" class="" id="" placeholder="label"></input></div><div class="field_right" id="field_right"><select name="" class="" id="" ><option>Text field</option><option>Textarea</option><option>Dropdown</option><option>Radio Button</option></select><input type="text" class="" id="" placeholder="discription" ></input></div></div></li>'); 
         $("#sortable").sortable('refresh'); 
       }else{ 
        $("#sortable").append('<li id="1" class="ui-state-default"><a class="remove ui-icon hello1">remove</a><span class="ui-icon down_arrow"></span>row 1 <div class="toggle_div" id="toggle_div"><div class="field_left" id="field_left"><input type="text" name="" class="" id="" placeholder="label"></input></div><div class="field_right" id="field_right"><select name="" class="" id="" ><option>Text field</option><option>Textarea</option><option>Dropdown</option><option>Radio Button</option></select><input type="text" class="" id="" placeholder="discription" ></input></div></div></li>'); 
        $("#sortable").sortable('refresh'); 
       } 

     }); 

     $("#sortable").on("click", "a.remove", function(){ 
      $(this).parent().remove(); 
      $("#sortable").sortable('refresh'); 
     }); 
     var flip = 0; 
     $("#sortable").on("click", "span", function(){ 
      $(this).next(".toggle_div").toggle('slow', function(){ 
       if(flip++ % 2 == 0){ 
        $(this).removeClass("up_arrow"); 
        $(this).addClass("down_arrow"); 
       }else{ 
        $(this).removeClass("down_arrow"); 
        $(this).addClass("up_arrow"); 
       } 
      }); 
      $("#sortable").sortable('refresh'); 
     }); 
    }); 

Answer 1

удалить эту строку из кода, и он будет работать:

$("#sortable").disableSelection(); 

jsfiddle