jQuery參數不能正常工作

Question

遇到了2件事情的麻煩。這兩個參數都只適用於頁面加載時生成的第一個框區域。但是之後創建的任何後續內容都不受這些選項的影響。我做錯了什麼，我該如何解決？

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

Answer 1

我假設你正在使用AJAX。您應該爲動態生成的DOM元素以不同方式處理事件委派。

理想情況下，您不應該使用body或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'); 
});