只有当类是硬编码的时，才可以使用jQuery来显示/隐藏html内容

Using jQuery to show/hide html content only works if class is hard-coded

本文关键字：jQuery 可以使 显示 内容 html 隐藏 编码      更新时间：2023-09-26

我有一系列隐藏的html表单组，我希望根据在两个级联选择列表中选择的值来显示这些组。我正在使用jQuery来切换第二个列表上的一个类，然后由一个on change事件函数调用该类。

如果我对类进行硬编码，则在启动on更改时会显示后续的表单组。

如果我使用jQuery中的toggleClass来动态更改类，那么即使正确地切换了类，on-change函数也不会启动。

HTML

          <div class="form-group hidden" id="option_env">
                <label class="col-xs-12 col-sm-2 control-label" for="ddl_env">Options</label>
                <div class="col-xs-12 col-sm-10">
                    <select name="category" id="ddl_env" class="form-control ">
                        <option value="-- Select an option --">-- Select an option --</option>
                        <option value="horse">Tethered horses</option>
                        <option value="Watercourses">Watercourses</option>
                    </select>
                </div>
          </div>

jQuery

var cascadeSelect = $('#ddlcategory');    
var optionSelect =  cascadeSelect.on('change', function () {
    hideAll();
    var option = $(this).val();
    var childSelect = showOption(option);
    return childSelect;
});
$('.option').on('change', function () {
    hideDetail();
    var detail = $(this).val();
    showDetail(detail);        
});
function showOption(option) {   
    var returnOption = null;
    $('#' + option).toggleClass('chosen hidden')
        .find('select').toggleClass('option')
        ;
    var ddl_option = option.substr(option.indexOf('_')+1);
    return returnOption = $('#ddl_' + ddl_option);
}

这在ddl_env选择具有由jQuery find添加的option类的情况下起作用，但是，当选择列表项发生更改时，$('.option').on('change', function ()不会激发。

如果我注释掉.find('select').toggleClass('option')行，并手动将option类添加到ddl_env选择中，那么它可以正常工作。

我用jQuery.addClass.得到了同样的结果

Chrome中的调试表明，当option类没有硬编码时，ddl_env选择更改不会触发更改事件。

经典问题。更换

$('.option').on('change', function()...

带有

$(document).on('change', '.option', function()...

第二种语法适用于当前和未来的".option"项。

当页面加载时，此处理程序将只处理任何带有类option的内容

$('.option').on('change', function () {
    hideDetail();
    var detail = $(this).val();
    showDetail(detail);        
});

为了让它在页面加载后处理动态分配给该类的元素，您需要将事件处理程序委托给更高的元素，因此基本上是它的父元素，或者如果所有其他元素都失败了document

$(document).on('change', '.option', function () {
    hideDetail();
    var detail = $(this).val();
    showDetail(detail);        
});
相关文章：