Question

我正在使用Grails插件进行ajax上传http://grails.org/plugin/ajax-uploader，该插件直接基于http://valums.com/ajax-upload/。正如您从第二个链接中看到的那样，它会将带有“上传文件”的div作为文本呈现，该文本在悬停时可以更改并且可以单击，并允许从用户的计算机中选择文件。这个文本是在插件的javascript文件中定义的（我没有看到任何配置它的方法），所以要改变它我在我的.gsp中使用JQuery我使用插件。但是出于某种原因，通过更改文本，div不再可单击。请注意，如果我更改插件的javascript文件中的文本，它很好并且不会中断，因此没有任何依赖于实际文本的内容。但我不想在javascript文件中更改它，因为：a）我不想改变插件和b）我想国际化文本而不是在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

如果我在浏览器的DOM检查器中查看.qq-upload-button，它看起来像这样：

<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>',
});

（我从file upload plugin source获得了默认模板）

Answer 2

调用.text()用类.qq-upload-button替换div中的所有内容。

在页面上，您举例说明，div包含标题，但在您的脚本通过调用<input>替换标题后删除.text()。我想onmouseover和onclick事件处理程序依赖于它的存在才能正常工作。

Answer 3

尝试使用bind绑定点击和悬停事件：

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

使用JQuery更改div的文本意外地删除了悬停和单击功能

3 个答案: