jQuery事件綁定不適用於多個動態對象

Question

在通過AJAX動態添加的對象的下拉菜單上，添加或刪除類。 如果僅存在一個對象，則代碼可以工作，但是由於某些原因，一個以上的對象將使其無法工作。

$('.product_options_container').on('change', '.product_preset_dropdown', function() {
    var conceptName = $(this).closest('.product_option_hidden').children('.product_preset_dropdown').find(":selected").text();
    if(conceptName != 'custom'){
        $(this).closest('.product_option_hidden').children('.product_encapsulation').addClass("hidden");
    }
    else if(conceptName == 'custom'){
        $(this).closest('.product_option_hidden').children('.product_encapsulation').removeClass("hidden");
    }
});

標記

// DIV CONTAINER AJAX IS LOADED TO
<div id="dynamicInputs" class="dynamicInputs"></div>

// AJAX FILE LOADED
<div class='product_option_hidden'>
    <div class="product_preset_inner">
        <div class="product_preset_inner_border">
            <div class="product_preset_dropdown_container">
                <select class="product_preset_dropdown">
                    <option value="custom">custom</option>
                    <option value="preset">preset</option> 
                    <option value="preset2">preset 2</option>
                 </select>
             </div>
         </div>
     </div>
     <div class="product_encapsulation">
         //other content here 
     </div>
 </div>

Answer 1

問題是

var conceptName = $(this).closest('.product_option_hidden').children('.product_preset_dropdown').find(":selected").text();

正在為添加的每個其他對象添加一個附加的自定義字符串輸出，更改為以下內容即可

var conceptName = $(this).closest('.product_preset_dropdown').find(":selected").text();