JQuery: добавить в текстовое поле при загрузке документа

Question

Используя архитектуру плагинов jQuery, в моем файле js есть строка кода, которая добавляет простой элемент "div" в текстовое поле. Задача кажется такой простой, но я не могу понять, где я иду не так.

Фрагмент из моего html-файла

<div style="margin-top:50px">
    Search: <input id="searchbox" type="text" /><br />
</div>
...
<script type="text/javascript">
$(document).ready(function() {
    $('#searchbox').testplugin();
})
</script>

Это из файла testplugin.js

init : function(options)
{
    // some initialization

    // iterate through all the jquery objects
    return this.each(function() {
        $(this).append('<div>Sample Text</div>');
    });
}

На данный момент я уверен, что $ (this) относится к правильному объекту (я пытался оповестить идентификатор). Кроме того, когда я пытаюсь сделать «просмотр источника» в Firefox, я также вижу недавно добавленный div (но не в реальном графическом интерфейсе). Однако в Internet Explorer появляется ошибка «Неожиданный вызов метода или правильный доступ».

Что я здесь не так делаю? Или что я должен сделать, чтобы сделать эту работу?

Спасибо! Эрвин

Answer 1

Эрвин, я вполне уверен, что по спецификации - вы не можете поместить элемент div внутрь элемента input.Вероятно, это источник вашей ошибки IE и причина, по которой вы ничего не видите в своем браузере, когда он загружается.

Попробуйте выполнить .val ('test');вместо append () & вы, вероятно, столкнетесь с рабочим кодом, то же самое для .addClass ('yourcssclass');или любая другая «законная» операция DOM.

Answer 2

init : function(options)
{
// some initialization

// iterate through all the jquery objects
return this.each(function() {
    $(this).val('Sample Text');
});
}

этот код поможет, если вы пытаетесь сделать текст внутри текстового поля ' Sample Text ', ваш плагин будет по-прежнему работать с такими элементами, как div, a и т. Д..

Answer 3

Изменен мой код для использования после () вместо append ()

init : function(options)
{
    // some initialization

    // iterate through all the jquery objects
    return this.each(function() {
        $(this).after('<div>Sample Text</div>');
    });
}