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

    }

});