使用JQuery更改div的文本会意外移除悬停和单击功能
我使用了一个直接基于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不再可单击或对悬停做出反应。
回答 3
Stack Overflow用户
发布于 2011-11-05 03: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获得了默认模板)
Stack Overflow用户
发布于 2011-11-05 03:43:04
调用.text()会将div中的所有内容替换为类.qq-upload-button。
在您举的示例页面上，该div不仅包含标题，还包含一个在脚本通过调用.text()替换标题后被删除的<input>。我猜onmouseover和onclick事件处理程序依赖于它的存在才能正常工作。
Stack Overflow用户
发布于 2011-11-05 03:44:05
尝试使用bind绑定单击和悬停事件：
$(".qq-upload-button").bind({
click: function(){
//click event
},
mouseover: function(){
//mouseover event
},
mouseout: function(){
//mouseout event
}
});https://stackoverflow.com/questions/8014806
复制相似问题
腾讯云开发者
