Question

您好我试图在选择输入中添加与用户选择相对应的文本字段。理想情况下，如果用户选择值为＆＃34; created_at＆＃34;应在div内创建一个文本输入字段＆＃34; search_input_div＆＃34;这首先只是一个空的div。

*************编辑 - 我忘记提及的事情**********

＆＃34; search_column_select＆＃34; select由另一个按钮创建。因此，在加载页面时它不存在，我不确定这是否/如果这会影响功能。

*************编辑结束*****

出于某种原因，为什么我使用以下代码没有任何反应：

JS

 $('#search_column_select').change(function(){
        if($("#search_column_select").val() == 'created_at'){
            $('#search_input_div').html("<input class='search_input' placeholder='(YYYY-MM-DD) or (YYYY-MM)'/>");
        }
    });

以防万一在这里是HTML：

HTML：

<div class="search_box" id="search_column_div">
    <select id='search_column_select'>
<option value='select'>search by...</option>
<option value='created_at'>by date created</option>
<option value='street_address'>by street address</option>
</select>
</div>
        <div id="search_input_div">
            <!-- Search_input text field goes here -->
        </div>

如果有人能够指出我哪里出错或如何解决这个问题，我将非常感激！谢谢！

Answer 1

确保在文档准备好后添加javascript代码

http://jsfiddle.net/4Jt5q/1/

$(function(){ 
    $('#search_column_select').change(function(){
        if($("#search_column_select").val() == 'created_at'){
            $('#search_input_div').html("<input class='search_input' placeholder='(YYYY-MM-DD) or (YYYY-MM)'/>");
        }
    });
});

这样做是为了将jQuery事件添加到$(function(){...});中，所以现在，当文档准备好并且search_column_select存在时，您的javascript将被触发。

更新

由于它是动态创建的，因此您必须在创建后添加change侦听器或使用如下事件委托：

$(document).on('change', '#search_column_select', function(){
    if($("#search_column_select").val() == 'created_at'){
        $('#search_input_div').html("<input class='search_input' placeholder='(YYYY-MM-DD) or (YYYY-MM)'/>");
    }
});

您还可以添加document。

的直接父级，而不是'#search_column_select'

Answer 2

您必须将jQuery放入文档就绪函数中：

$( document ).ready(function() {
    $('#search_column_select').change(function(){
        if($("#search_column_select").val() == 'created_at'){
            $('#search_input_div').html("<input class='search_input' placeholder='(YYYY-MM-DD) or (YYYY-MM)'/>");
        }
    });
});

使用Jquery动态添加文本字段

2 个答案:

更新