0

I've broken it again, and no idea how.

I have a CodePen of my recent activities.

What I've been trying to implement is a sortable function that checks first if there's only one #p_scents. If there is, it shouldn't be sortable (ie the .icon-sort shouldn't be activated). However if there is more than one, it should be sortable.

The problem I ran into however is after all but one has been deleted, the sortable functionality is still activated as it doesn't RE-check for how many #p_scents exist.

How can I fix this?

FYI somehow I broke the sortable functionality now 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;
        });
    });
});
4

1 回答 1

7

Your problem is here:

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

When make click on element ".icon-sort" is still sortable. You must use an action that makes the check before sort action begins: like mouseenter.

Here a jsfiddle

于 2013-09-11T14:31:56.997 回答