0

有两件事有问题。这两个参数仅适用于页面加载时生成的第一个框区域。但是之后创建的任何后续选项都不受这些选项的影响。我做错了什么，我该如何解决？

//CHECK IF TYPE/PAGE(S) IS SELECTED OR NOT
$(".dropdown").change(function () {
    if($(this).val() == "0") $(this).addClass("empty");
    else $(this).removeClass("empty").children('.placeholder').remove();
});
//CHECKS TO MAKE SURE ONLY ONE CHECKBOX IS SELECTED
var $onlyOne = $('.onlyOne');
$onlyOne.click(function () {
    $onlyOne.filter(':checked').not(this).removeAttr('checked');
});

我的 JS 的整个代码是：

$(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 grayout" placeholder="*Vendor Name" type="text"><select class="move-me-right-10 dropdown"><option value="0" class="placeholder" selected="selected">*Select Type</option><option value="analytics">Analytics</option><option value="chat">Chat</option><option value="remarketing">Remarketing</option><option value="other">HTML/CSS/JS</option></select><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 class="dropdown"><option value="0" class="placeholder" selected="selected">*Select Page(s)</option><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);
            //$(this).parent().next().children(0).children(1).prop('disabled', false);
        } else {
            //PT-VALUES HIDDEN
            $(this).val('▸');
            $(this).parent().next().children(0).children(0).attr('readonly', true);
            //$(this).parent().next().children(0).children(1).prop('disabled', 'disabled');
        }
        //TOGGLE VISIBILITY OF HIDDEN AREA
        hiddenarea.toggle();
    });
    //CHECK IF TYPE/PAGE(S) IS SELECTED OR NOT
    $(".dropdown").change(function () {
        if($(this).val() == "0") $(this).addClass("empty");
        else $(this).removeClass("empty").children('.placeholder').remove();
    });
    $(".dropdown").change();
    //CHECKS FOR MORE THAN ONE 1 MANAGE-PT BEFORE ENABLES SORTABLE
    $('body').on('mouseenter', '.icon-sort', function () {
        if ($(".manage-pt").size() > 1) {
            $('#p_scents').sortable({
                disabled: false,
                placeHolder: '.placeHolderHighlight',
                handle: '.icon-sort',
            });
        } else $('#p_scents').sortable({
            disabled: true,
        });
    });
    //CHECKS 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

1

我假设您正在使用 AJAX。对于动态生成的 DOM 元素，您应该以不同的方式处理事件委托。

理想情况下，您不应该使用bodyor document。尝试使用一直存在的最近的父选择器（非 AJAX）。

//CHECK IF TYPE/PAGE(S) IS SELECTED OR NOT
$("body").on("change", ".dropdown", function () {
    if($(this).val() == "0") $(this).addClass("empty");
    else $(this).removeClass("empty").children('.placeholder').remove();
});

//CHECKS TO MAKE SURE ONLY ONE CHECKBOX IS SELECTED
$("body").on("click",'.onlyOne', function () {
    $onlyOne.filter(':checked').not(this).removeAttr('checked');
});
于 2013-10-24T19:07:57.350 回答