jQuery 事件绑定不适用于多个动态对象

jquery event binding not working with more than one dynamic object

本文关键字：动态 对象 适用于 事件 绑定 不适用 jQuery      更新时间：2023-09-26

在通过 AJAX 更改动态添加对象的下拉菜单中，添加或删除类。如果只有 1 个对象存在，则代码可以工作，但由于某种原因，多个对象会阻止它工作。

$('.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>

问题是 

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

正在为添加的每个附加对象添加额外的自定义字符串输出，更改为以下以工作

var conceptName = $(this).closest('.product_preset_dropdown').find(":selected").text();
相关文章：