Изменение текста div с помощью JQuery неожиданно удаляет функции наведения и щелчка

Question

Я использую плагин Grails для загрузки ajax, http://grails.org/plugin/ajax-uploader,, который напрямую основан на http://valums.com/ajax-upload/. Как видно из второй ссылки, он отображает div с текстом «Загрузить файл» в качестве текста, который изменяется при наведении курсора мыши и кликабельности, и позволяет выбрать файл с компьютера пользователя. Этот текст определен в файле javascript плагина (я не вижу способа его настройки), поэтому для его изменения я использую JQuery в моем .gsp, где я использую плагин. Однако по какой-то причине при изменении текста div больше не активируется. Обратите внимание, что если я изменю текст в файле javascript для плагина, это нормально и не ломается, поэтому нет ничего, что полагалось бы на фактический текст, каким он является. Но я не хочу изменять его в файле javascript, так как: а) я не хочу изменять плагин и б) я хочу интернационализировать текст и не определять его в файле js.

на моей странице я делаю

<script>$(".qq-upload-button").text("Click to select or drag files here");</script>

Заметьте, я тоже попробовал это, так как подумал, что это может быть проблема с синхронизацией.

<script>
  $(document).ready(function () {
 $(".qq-upload-button").text("Click to select or drag files here");
  } );
 </script>

В обоих случаях текст корректно изменяется, но div больше не реагирует на нажатия или не реагирует на зависание.

Answer 1

Если я посмотрю на .qq-upload-button в инспекторе DOM моего браузера, оно будет выглядеть так:

<div class="qq-upload-button" style="…">
    Upload a file<input multiple="multiple" type="file" name="file" style="…">
</div>

У него два дочерних элемента: текстовый узел с надписью «Загрузить файл» и входной файл, содержащий файлы для загрузки.

Когда вы вызываете .text() на .qq-upload-button, его содержимое (текст вместе с вводом) полностью заменяется.

jQuery (насколько я знаю) не имеет способа манипулировать текстовыми узлами. Но вы можете смело изменять текст кнопки следующим образом:

$('.qq-upload-button').contents(':first').get(0).nodeValue = "…";

Или меньше JQuerily:

$('.qq-upload-button')[0].firstChild.nodeValue = "…";

Другой вариант - указать текст кнопки при создании FileUploader. Параметр template недокументирован, но работает в текущей версии:

new qq.FileUploader({
    template: '<div class="qq-uploader">' + 
        '<div class="qq-upload-drop-area"><span>Your text here</span></div>' +
        '<div class="qq-upload-button">Your text here</div>' +
        '<ul class="qq-upload-list"></ul>' + 
     '</div>',
});

(Я получил шаблон по умолчанию из источника плагина для загрузки файлов )

Answer 2

Вызов .text() заменяет все внутри div с классом .qq-upload-button.

На странице, которую вы привели в качестве примера, этот div содержит заголовок, но также и <input>, который удаляется после того, как ваш скрипт заменяет заголовок, вызывая .text().Я предполагаю, что обработчики событий onmouseover и onclick зависят от его существования для правильной работы.

Answer 3

Попробуйте использовать bind для привязки событий щелчка и наведения:

$(".qq-upload-button").bind({
    click: function(){
        //click event
    },
    mouseover: function(){
        //mouseover event
    },
    mouseout: function(){
        //mouseout event
    }
});