问使用JQuery更改div的文本会意外移除悬停和单击功能
EN

Stack Overflow用户

提问于 2011-11-04 19:34:34

回答 3查看 682关注 0票数 2

我使用了一个直接基于http://valums.com/ajax-upload/的Grails插件http://grails.org/plugin/ajax-uploader来上传ajax。从第二个链接可以看到，它呈现了一个文本为“Upload a file”的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不再可单击或对悬停做出反应。

jquery

ajax

grails

回答 3

Stack Overflow用户

回答已采纳

发布于 2011-11-04 19:52:28

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

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

它有两个子节点:一个是“上传文件”的文本节点，另一个是保存要上传的文件的文件输入。

在.qq-upload-button上调用.text()时，其内容(文本和输入)将被完全替换。

据我所知，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获得了默认模板)

票数 3

Stack Overflow用户

发布于 2011-11-04 19:43:04

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

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

票数 1

Stack Overflow用户

发布于 2011-11-04 19:44:05

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

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