jQuery sortable不适用于动态添加的div

Question

我创建了一个按钮，该按钮动态添加内部元素的divs。我想使用jQuery .sortable()来更改divs的顺序，但是由于某些原因，它不能正确地显示。

我的代码：https://jsfiddle.net/t5o1npd4/

$(document).ready(function() {
  //Create button
  $(document).on('click', '#add', function() {
    var $skill1 = '<select><option disabled selected hidden>Select One</option></select>';

    $('<div class="myClass"></div>').appendTo('#area').append($skill1);
  });
});

//Why not works the sortable to dynamically added divs??
$("#area").sortable({
  appendTo: "parent",
  helper: "clone",
  handle: ".myClass",
  stop: function(ui, event) {
    var id = event.item.index();
  }
}).disableSelection();

.myClass {
  padding: 5px;
  padding-right: 10px;
  border: 1px solid #909090;
  border-bottom: none;
  background-color: #cccccc;
}

.myClass:last-child {
  border-bottom: 1px solid #909090;
}

#area input[type="text"] {
  display: none;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<button id="add"><b style="font-size:14px;">+</b> Add</button>

<div id="area"></div>

Answer 1

尝试删除初始化语句中的句柄行。

public class MainActivity extends AppCompatActivity {


private static final String TAG = MainActivity.class.getSimpleName();

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Button button = (Button) findViewById(R.id.buttonPanel);
    button.setOnClickListener(new View.OnClickListener() {
        @RequiresApi(api = Build.VERSION_CODES.O)
        @Override
        public void onClick(View view) {
            try {
                Process p = Runtime.getRuntime().exec("su");
                tel();
            } catch (IOException e) {
                e.printStackTrace();
            }

        }
    });

}

@RequiresApi(api = Build.VERSION_CODES.O)
private void tel(){
//        String base64Challenge = Base64.encodeToString(, 
Base64.NO_WRAP);
    TelephonyManager telephonyManager = (TelephonyManager)
            getSystemService(Context.TELEPHONY_SERVICE);
    boolean isCarrier = telephonyManager.hasCarrierPrivileges();
    String authentication = 
telephonyManager.getIccAuthentication(TelephonyManager.APPTYPE_SIM, 
TelephonyManager.AUTHTYPE_EAP_SIM, "");
    Log.v(TAG, authentication);
    if (isCarrier) {
        Log.v(TAG, "privs granted");
        telephonyManager.setDataEnabled(false);
    } else {
        Log.v(TAG, "no privilegies");
    }
}


}

$(document).ready(function() {
  //Create button
  $(document).on('click', '#add', function() {
    var $skill1 = '<select><option disabled selected hidden>Select One</option></select>';

    $('<div class="myClass"></div>').appendTo('#area').append($skill1);
  });
});

//Why not works the sortable to dynamically added divs??
$("#area").sortable({
  appendTo: "parent",
  helper: "clone",
  stop: function(ui, event) {
    var id = event.item.index();
  }
}).disableSelection();

.myClass {
  padding: 5px;
  padding-right: 10px;
  border: 1px solid #909090;
  border-bottom: none;
  background-color: #cccccc;
}

.myClass:last-child {
  border-bottom: 1px solid #909090;
}

#area input[type="text"] {
  display: none;
}