Динамически загружаемое поле ввода по клику?

Question

Динамически загружаемое поле ввода по клику?

0

На данный момент у меня есть список строк, которые я получаю из базы данных. Затем я перебираю эти строки с помощью инструкции foreach и печатаю их в своих <li></li>.

Когда я нажимаю на <li> я запускаю событие jQuery. Он получает строку из <li></li> и помещает ее в значение поля ввода, до сих пор она все еще работает нормально.

Хотя, когда я нажимаю внутри поля ввода, значение текста исчезает, а также я не могу получить поле ввода для focus и это не позволяет мне вводить текст.

Мои вопросы: почему мое входное значение исчезает и почему оно не позволяет мне вводить что-либо в поле ввода?

Код ниже:

HTML до щелчка

<li id="list_item-47" class="sortableList" data-id="47">
    The Title
    <br>
    <br>
</li>

HTML после клика

<li id="list_item-47" class="sortableList" data-id="47">
    <input type="text" class="inputField" value="The Title">
    <div class="updateLink" data-id="47"></div>
</li>

HTML после фокуса

<li id="list_item-47" class="sortableList" data-id="47">
    <input type="text" class="inputField" value>
    <div class="updateLink" data-id="47"></div>
</li>

JQuery:

$(".sortableList").on("click", function(event){
    event.preventDefault();

    var list_item = $(this).text();
    var data_id = $(this).data('id');       

    $(this).html('<input type="text" class="inputField" value="' + list_item + '"></input><div class="updateLink" data-id="' + data_id + '"></div>');       

    return false;

});

Любая помощь приветствуется.

learn 11 нояб. 2013, в 16:59

Источник

0

Попробуйте удалить тег <br> и лишние пробелы из тега <li>
Krishna 11 нояб. 2013, в 15:43

Теги:

javascript

jquery

html

input

focus

1 ответ

Ещё вопросы

Попробуйте удалить тег <br> и лишние пробелы из тега <li>

Kyle R · Accepted Answer · 2013-11-11T13-10-00.000Z

Ввод исчезает, поскольку создаваемый вами вход находится в пределах диапазона.sortableList, и этот диапазон имеет прикрепленное к нему событие щелчка. Поэтому, когда вы нажимаете на ввод, вы запускаете событие click, которое заменяет содержимое этого li пустым текстовым полем.

Быстрое исправление заключается в том, чтобы добавить это внутри вашей функции щелчка:

$(this).off('click');

http://jsfiddle.net/8D9VY/

Вам все равно придется обрабатывать то, что когда вы хотите сохранить то, что в текстовом поле, и затем снова включить событие click, если вы хотите снова изменить значение...

Да, только что проверил это, и это работает для меня, спасибо за вашу помощь !!