Функция jQuery работает в консоли, но не в коде

Question

Приведенный ниже код создает поле поиска, а затем присоединяет к нему событие фокуса, поэтому предустановленное значение исчезает, когда пользователь щелкает поле ввода. Строка.focus работает в консоли, но не в коде. Как я могу заставить его работать в коде?

<script type='text/javascript'>
jQuery( document ).ready(function( $ ) {
    jQuery('#site-nav').append("<div class='nav' style='width: 130px; margin-top: 15px;'><form     id='site-search' method='get' action='/search'><input id='search' name='search' class='textfield' tabindex='1' type='text' style='border-radius: 10px; height: 30px;' value='SEARCH'></form></div>")
});
jQuery("#search").focus(function(){$(this).val("");});
</script>

Кстати, я должен сказать "jQuery", потому что наше приложение настроено таким образом, чтобы избежать конфликтов. Спасибо. Благословения

Answer 1

Переместить линию внутрь ready метод:

jQuery( document ).ready(function( $ ) {
    jQuery('#site-nav').append("<div class='nav' style='width: 130px; margin-top: 15px;'><form     id='site-search' method='get' action='/search'><input id='search' name='search' class='textfield' tabindex='1' type='text' style='border-radius: 10px; height: 30px;' value='SEARCH'></form></div>");
    jQuery("#search").focus(function(){$(this).val("");});
});

Редактировать:

Имейте в виду, что анонимная функция в focus() всегда срабатывает, если поле получает фокус. Так что после этого действия всегда будет пусто