JQuery逻辑没有被应用于动态创建的html

Question

我已经写了下面的JavaScript/JQuery代码。当从HTML下拉菜单中选择一个选项时，将触发此代码。它会比较值选择的值已经被添加到一个HTML表：

$('#addonSelectOptions').on('change', function(e){ 
    e.preventDefault(); 

    var selectedAddon = $('#addonSelectOptions option:selected').val(); 
    var selectedText = $('#addonSelectOptions option:selected').text(); 
    var currentAddons = $('#acg_addons').val(); 

    if(selectedAddon == '0') { 
     $('#availableAddOns > tbody:last').empty(); 
     $('#availableAddOns > tbody:last').append('<tr id="noaddonShown"><td>No add-ons</td></tr>'); 
     $('#acg_addons').val(' '); 
    } else { 

     var addonStrings = currentAddons.toString(); 
     var addonCheck = 'addOn-'+selectedAddon; 

     $(".selectedAddonTableTR").each(function() { 
      var rowID = $(this).attr('id'); 

      if(rowID == addonCheck) { 
       alert('You have already added this Add On to this Game'); 
       return false; 
      } else { 
       $('#noaddonShown').empty(); 
       $('#availableAddOns > tbody:last').append('<tr id="addOn-'+selectedAddon+'" class="selectedAddonTableTR"><td>'+selectedText+'</td></tr>'); 
       var addons = $('#acg_addons').val(); 
       $('#acg_addons').val(addons+''+selectedAddon+','); 
      } 

     }); 

    } 

}); 

如果我选择从已经存在于表中的下拉选项，将显示警报（它的意思办） 。然后，如果我选择一个不在HTML表格中的选项，它会将它添加到表格中（这是正确的）。但是，如果我选择新添加的选项，则会触发警报，但会再次将其添加到表中。它只能显示警报，而不是第二次添加警报。

我从代码中遗漏了什么来防止这种情况？

编辑：
基于缺少MCVE，这里是下拉HTML：

<select id="addonSelectOptions"> 
    <option value="0">--No Addon--</option> 
    <option value="2">Add On 1</option> 
    <option value="1">Add On 2</option> 
</select> 

这是HTML表格时使用过：

<table id="availableAddOns"> 
    <tbody> 
     <tr id="addOn-1" class="selectedAddonTableTR"> 
      <td>Add On 1</td> 
     </tr> 
    </tbody> 
</table> 

Answer 1

这应该得到你在正确的道路上。你没有很好地解释你的问题，但我认为这会让你朝正确的方向发展。阅读我的评论，并让我知道你是否需要更详细的解释发生了什么。

$('#addonSelectOptions').on('change', function(e){ 
    e.preventDefault(); 

    var select = $(this), //Don't use var declaration more than once 
     selectedAddon = $(select).val(), 
     selectedAddonIdString = 'addOn-' + selectedAddon, 
     selectedText = $(select).find('option:selected').text(), 
     availableAddOns = $('#availableAddOns'), // Cache your DOM elemtns, don't select them more than once 
     currentAddonArr = []; //Use an array to store multiple values... I don't know what you were trying to do with addons = $('#acg_addons').val(); 

    if(selectedAddon == '0') { 
     $(availableAddOns).find('> tbody:last').empty(); 
     //You didn't prove any HTML, but you can't dynamically add an HTML element here, but then reference it below since it may not exist 
     //If this part of the if statement never fires, the #noaddonShown element will not exist 
     $(availableAddOns).find('> tbody:last').append('<tr id="noaddonShown"><td>No add-ons</td></tr>');  // Rework this 
    } else { 

     if($.inArray(selectedAddonIdString, currentAddonArr) === -1) { 
      //You don't need to run empty funtions on an element that will simply show the same information over and over again if a condition is met. 
      //Instead use $('#noaddonShown').hide(); $('#noaddonShown').show(); to toggle the element 
      $('#noaddonShown').empty(); // rework this 
      $(availableAddOns).find('> tbody:last').append('<tr id="addOn-'+selectedAddon+'" class="selectedAddonTableTR"><td>'+selectedText+'</td></tr>'); 
      //var addons = $('#acg_addons').val(); not needed 
      //$('#acg_addons').val(addons+''+selectedAddon+','); 

     } else { 
      alert('You have already added this Add On to this Game'); 
      return false; 
     } 

    } 

});