Использование Jquery для динамического добавления текстового поля

Question

Использование Jquery для динамического добавления текстового поля

0

Привет, я пытаюсь добавить текстовые поля, соответствующие выбору пользователя в выбранном входе. В идеале, если пользователь выбирает параметр со значением "created_at", текстовое поле ввода должно быть создано внутри div "search_input_div", которое поначалу является просто пустым div.

************* Edit - Что-то я забыл упомянуть **********

Выбор "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>

Если кто-нибудь может указать, где я ошибся или как исправить это, я бы очень признателен! Благодарю!

mario 30 апр. 2014, в 17:13

Источник

3

У меня работает jsfiddle.net/DAtA8
laaposto 30 апр. 2014, в 14:51
0

Ответ обновлен, чтобы отразить ваше обновление в вопросе.
Andrei 30 апр. 2014, в 15:09

Теги:

javascript

jquery

html5

2 ответа

1

Вы должны поместить 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)'/>");
        }
    });
});

Oliver Schaub 30 апр. 2014, в 13:31

Ещё вопросы

Ответ обновлен, чтобы отразить ваше обновление в вопросе.

Andrei · Accepted Answer · 2014-04-30T12-07-00.000Z

Убедитесь, что вы добавили код 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'.

Спасибо! Я ценю решение и за объяснение, где я ошибался.
Добро пожаловать ! Рад, что смог помочь.