javascript - 使用Jquery动态添加文本字段

Question

您好，我正在尝试添加与选择输入中用户的选择相对应的文本字段。理想情况下，如果用户选择值为“created_at”的选项，则应在 div“search_input_div”内创建文本输入字段，该 div 首先只是一个空 div。

*************编辑 - 我忘了提及************

“search_column_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 监听器或使用事件委托(delegate)，如下所示:

$(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)'/>");
    }
});

您还可以添加'#search_column_select'的直接父级，而不是document。