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();

jquery事件绑定不能与多个动态对象一起使用

1 个答案: