Question

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

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

如果我使用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 select具有jQuery option添加的find类，这就有效，但是当选择列表项为$('.option').on('change', function ()时，.find('select').toggleClass('option')不会触发改变。

如果我注释掉option行并手动将ddl_env类添加到ddl_env选择，那么它可以正常工作。

我使用jQuery.addClass得到了相同的结果。

在Chrome中进行调试显示option选择更改不会在{{1}}类未进行硬编码时触发更改事件。

Answer 1

经典问题。取代

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

与

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

第二种语法适用于当前和未来的#op;＆＃39;项目

Answer 2

当页面加载

时，此处理程序仅适用于具有clas option的任何内容

$('.option').on('change', function () {
    hideDetail();

    var detail = $(this).val();
    showDetail(detail);        
});

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

$(document).on('change', '.option', function () {
    hideDetail();

    var detail = $(this).val();
    showDetail(detail);        
});

使用jQuery显示/隐藏html内容仅在类是硬编码时才有效

HTML

的jQuery

2 个答案: