CODEWITHSUNDEEP
javascriptjqueryhtml
bmoneruxui
bmoneruxui

Reputation: 313

jQuery Arguments Not Working

Having trouble with 2 things. Both of these arguments are ONLY working for the first box area generated on page load. But any subsequent ones created after aren't affected by these options. What am I doing wrong, and how can I fix it?

//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');
});

The entire code for my JS is:

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

Upvotes: 0

Views: 83

Answers (1)

Venkata Krishna
Venkata Krishna

Reputation: 15112

I assume you're using AJAX. You should be handling event delegation differently for dynamically generated DOM elements.

Ideally, you shouldn't be using body or document. Try using the nearest parent selector which is present all the time(non 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');
});

Upvotes: 1

Related Questions