javascript - jQuery 可排序问题开/关检查

Question

我又把它弄坏了，但不知道怎么办。

我有一个CodePen我最近的事件。

我一直在尝试实现一个可排序的函数，它首先检查是否只有一个#p_scents。如果有，则不应对其进行排序(即不应激活 .icon-sort)。但是，如果有多个，则应该可以排序。

然而，我遇到的问题是，除了一个已被删除之外，可排序功能仍然处于激活状态，因为它不会重新检查存在多少#p_scents。

我该如何解决这个问题？

仅供引用，我现在破坏了可排序功能o_O

$(function () {
    var i = 1;
    //ADD ROW 
    $('body').on('click', '.addPTbutton', function () {
        var box = '<table class="manage-pt" id="' + i + '"><tr class="pt-entry"><td class="pt-toggle-group"><input class="pt-button togPTbutton" id="0" type="button" value="▾"><input class="pt-button addPTbutton" id="0" type="button" value="+"><input class="pt-button delPTbutton" id="' + i + '" type="button" value="-"></td><td class="pt-values"><div><input class="vendor" placeholder="*Vendor Name" type="text"><i class="icon-sort"></i><i class="icon-lock"></i></div><div><textarea class="ptCode" name="ptCode" placeholder="*Pixel Tag Code"></textarea></div><div class="page-select"><select><option value="AllPages">All Pages</option><option value="HomePage">HomePage</option><option value="VehicleDetailsPage">VehicleDetailsPage</option><option value="VehicleSearchResults">VehicleSearchResults</option><option value="ContactUsForm">ContactUsForm </option></select></div><div class="area-checkboxes"><p class="wheretosave">*Where?</p><input name="head" type="checkbox"><label for="head">Head</label><input name="body" type="checkbox"><label for="body">Body</label></div><hr/></td></tr></table>';
        i++;
        $("#p_scents").append(box);
        return false;
    });
    //DELETE ROW
    $('body').on('click', '.delPTbutton', function () {
        var boxnum = $(".manage-pt").length;
        if (boxnum <= '1') {
            alert('Cannot Delete Last Remaining Row');
        } else {
            $(this).parents().eq(3).remove();
        }
        return false;
    });
    //TOGGLE BUTTON
    $('body').on('click', '.togPTbutton', function () {
        var hiddenarea = $(this).parent().next().children().next();
        if ($(hiddenarea).is(':hidden')) {
            //PT-VALUES OPENED
            $(this).val('▾');
            $(this).parent().next().children(0).children(0).attr('readonly', false);
        } else {
            //PT-VALUES HIDDEN
            $(this).val('▸');
            $(this).parent().next().children(0).children(0).attr('readonly', true);
        }
        //TOGGLE VISIBILITY OF HIDDEN AREA
        hiddenarea.toggle();
    });
    //CHECKS FOR MORE THAN ONE 1 MANAGE-PT BEFORE ENABLES SORTABLE
    $('body').on('click', '.icon-sort', function () {
        if ($(".manage-pt").size() > 1) {
            $('#p_scents').sortable({
                disabled: false,
                placeHolder: '.placeHolderHighlight',
                handle: '.icon-sort',
            });
        } else $('#p_scents').sortable({
            disabled: true,
        });
    });
    //CHECK TO MAKE SURE ONLY ONE CHECKBOX IS SELECTED
    var $onlyOne = $('.onlyOne');
    $onlyOne.click(function () {
        $onlyOne.filter(':checked').not(this).removeAttr('checked');
    });
    //LOCK BUTTON ON/OFF LOCKS FORM
    $('body').on('click', '.icon-lock', function () {
        $(this).toggleClass('locked');
        var lockedarea = $(this).parents(0).eq(2);
        $(lockedarea).find('input[type=text],input[type=checkbox],textarea,select').prop('disabled', function (_, val) {
            return !val;
        });
    });
});

Answer 1

您的问题在这里:

//CHECKS FOR MORE THAN ONE 1 MANAGE-PT BEFORE ENABLES SORTABLE
$('body').on('click', '.icon-sort', function () {...});

当点击元素“.icon-sort”时仍然可以排序。您必须使用在排序操作开始之前进行检查的操作:例如 mouseenter。

这里是jsfiddle