带有触摸打孔的 jQuery .sortable 吸收了对可拖动元素的第一次点击

如何解决带有触摸打孔的 jQuery .sortable 吸收了对可拖动元素的第一次点击

我正在对一些列表项进行 ajaxing，然后使它们可排序。但是每个列表项都可以单击进行编辑。问题是第一次点击被“吸收”，因此即使没有发生拖动事件，用户也必须点击两次才能编辑。

我有一个带有 .sortable 的父 div，并且我有一个附加了点击事件的子列表项。我错过了什么？

var servicesHTML = '<div style="display:none;" id="service_list" class="service_list">';
$.each(response_data.data,function(key,val){
    servicesHTML += '<li id="service_'+val['service_id']+'" class="accordion_button services" style="cursor:default;" data-id="'+val['service_id']+'" data-price="'+val['price']+'" data-duration="'+val['duration']+'">';
    servicesHTML += val['name'];
    servicesHTML += '</li>';
});

servicesHTML += '<button class="accordion_button services" style="background-color:#dddddd;" data-id="new">+Add Service</button>';
servicesHTML += '<button class="accordion_button services system_users" data-location="https://'+$(location).attr('host')+'/wp-admin/edit.PHP?post_type=birs_service">All System Services</button>';
servicesHTML += '</div>';

$(servicesHTML).insertAfter($('#reorder_notice'));
$('#service_list').show(400);
$('.services').click(function(){
    $(this).click(function(f){
        f.preventDefault();
        popupServiceConfiguration($(this)); 
    });
});

$('#service_list').sortable({
    connectWith : '#service_list',axis : 'y',helper: 'clone',cursor: 'move',//handle: '.ui-drag-handle',update: function(event,ui){
        recordServiceOrder($('#service_list').sortable('toArray').filter(Boolean));
    },});