javascript - 在使用 Jquery 的 javascript 创建的标记中调用 javascript 函数

Question

我有通过单击按钮使用 Jquery 显示的表单字段。

[select dropdown: conOperator]   [textfield: conValue ]  [select dropdown: conValuedd]

conValuedd 默认隐藏。

我试图找出一种方法，以便当我在第一个选择下拉列表 [conOperator] 中选择 Apple 或 Banana 时，它会隐藏文本字段 conValue 并改为显示下拉 conValuedd。但是，如果我选择西瓜，它将显示 conValue 并再次隐藏 conValuedd。任何想法将不胜感激。

$('<select id="conOperator' + num + '" name="conOperator' + num + '" class="standard_select" style="width:147px;">
    <option>Watermelon</option>
    <option>Apple</option>
    <option>Banana</option>
   </select>&nbsp;
   <input type="text" id="conValue' + num + '" name="conValue' + num + '" class="short_input" value="" style="width:147px;">&nbsp;&nbsp;
   <select style="display:none" id="conValuedd' + num +'" multiple="multiple" size="5">
    <option value="option1">Blah</option>
    <option value="option2">Blah</option>
   </select>').appendTo('#addCondition');

Answer 1

尝试类似：

$('#addCondition').on('change','#conOperator' + num, function(e){        
    switch( $('option:checked',this).text() ){
        case 'Apple':
        case 'Banana':
            $(this).nextAll(':text:first').hide();
            $(this).nextAll('select:first').show();
            break;
        case 'Watermelon':
            $(this).nextAll(':text:first').show();
            $(this).nextAll('select:first').hide();
            break;
    }
});
$('#conOperator' + num).trigger('change');

演示

Answer 2

当您调用appendTo()时，生成<select/>的将添加到 DOM 中，因此您可以使用 jQuery 检索它并在其上添加侦听器。

$("#conOperator" + num).change(function() {
    // Your logic here
}