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 () {...});

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

这是一个jsfiddle