jQuery 可排序问题开/关检查

Posted 2023-05-08

【中文标题】jQuery 可排序问题开/关检查

【英文标题】：jQuery Sortable Issue On/Off Checking

【发布时间】：2013-09-15 13:51:15

【问题描述】：

我又弄坏了，不知道怎么弄的。

我有一个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;
        );
    );
);

【参考方案1】：

你的问题在这里：

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

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

这里是jsfiddle

【讨论】：

非常感谢！救命稻草！现在我的项目完成了！