сценарии диалога jQuery для ввода val

У меня небольшая проблема с диалоговым окном jQuery и с тем, как обрабатываются скрипты.

В диалоговом окне html у меня есть

<input id="test"> 

If I do

<script type="text/javascript>
   $('#test').val("haha")
</script>

после ввода он появляется. Если я поставлю это перед, это не сработает. Теперь проблема в том, что я пытаюсь изменить значение $ ('# test') с помощью триггера щелчка и не могу!

   $('.testbutton').click(function() { 
          alert();      
          $('#test').val("haha");
    });

Предупреждение работает, и начальная замена val работает, что означает отсутствие повторяющихся или отсутствующих областей ввода.

Итого скрипт, как сейчас, не работает:

<input type="button" class="testbutton" />
<input type="text" size="10" id="test" name="test" value="">

 $('#test').val("currentvalue"); // This works
       $('.testbutton').click(function() { 
              alert();      
              $('#test').val("haha");
        });

Обновить. В диалоговом окне отображается правильное значение #test после закрытия и повторного открытия диалогового окна. Может быть, я что-то упускаю?


person Rio    schedule 05.02.2010    source источник
comment
Ты уверен, что val() здесь? Afaik это для <select />, а не <input />. Попробуйте attr("value")   -  person ZeissS    schedule 05.02.2010
comment
@ZeissS - val() отлично работает для входов   -  person Marek Karbarz    schedule 05.02.2010
comment
Действительно, val() лучше всего. attr('value') работает для входных данных, потому что он преобразуется в JavaScript .value на узле HTMLInputElement. Он не обращается к атрибуту HTML value, что совсем другое дело: атрибут value соответствует свойству JavaScript .defaultValue, а не .value.   -  person bobince    schedule 05.02.2010


Ответы (3)


Поместите свой код jQuery в $(document).ready(function () {...your code...}). Это заставит его выполняться после того, как браузер создаст дерево DOM для вашей страницы. В противном случае javascript не сможет правильно искать / управлять элементами DOM. Это будет выглядеть так:

$(document).ready(function () {
    $('.testbutton').click(function() { 
          $('#test').val("haha");
    });
});

Обновление:

Если ваш HTML-код загружается динамически, используйте live для привязки обработчика событий:

$(document).ready(function () {
    $('.testbutton').live("click", function() { 
          $('#test').val("haha");
    });
});
person Ivan Nevostruev    schedule 05.02.2010
comment
Что ж, если это диалог, возможно, он загружается через AJAX, и что это фрагмент HTML. Если это так, то для этого контента не будет запущено событие готовности. - person Pointy; 05.02.2010
comment
Нет, не работает. Диалог в любом случае является событием post DOM, поэтому я думаю, что добавление document.ready внутри диалога не совсем имеет смысла? - person Rio; 05.02.2010
comment
Обновленная версия мне не подошла. Какая разница, куда его поставить? - person Rio; 05.02.2010

Я думаю, вам следует заключить свой код в $ (function () {// здесь код}); чтобы убедиться, что ваш код запускается только тогда, когда ваш DOM готов.

person Ricardo Rodrigues    schedule 05.02.2010
comment
Опять же, если содержимое диалогового окна представляет собой фрагмент HTML, загруженный через AJAX, события готовности нет. Конечно, я не знаю, как работает его диалог, потому что исходный вопрос не очень хорошо описывает среду. - person Pointy; 05.02.2010
comment
Если вы загружаете HTML через AJAX, вам следует запустить метод привязки после загрузки HTML в DOM, это зависит от конкретного варианта использования. - person Ricardo Rodrigues; 05.02.2010

Проблема закончилась тем, что # в тесте. Почему-то замена работает с идентификатором класса вместо идентификатора id. Я полагаю, это потому, что знак # заменит только один экземпляр, и по какой-то причине, которую я еще не обнаружил, существует более одного экземпляра диалога (или скрытый).

Спасибо за все ваши предложения!

person Rio    schedule 05.02.2010