为什么jQuery没有改变我的按钮文本?

时间:2013-08-22 16:26:29

标签: jquery colorbox

我正在使用带有colorbox插件的jQuery。我想用jquery更改按钮的文本。在这个例子之后,jQuery change button text我添加了这行代码:

$(document).ready(function(){
                $('#cboxClose').html('Hello World');

但按钮的文字仍然显示“关闭”

Jfiddle显示我的代码应该有效:http://jsfiddle.net/wTwXz/ - 但控制台没有显示任何错误。将代码更改为.val("hello world").text("hello world")都不起作用。此外,firebug中显示的HTML显示没有其他元素具有id = cboxclose

<!DOCTYPE html>
<html>
<head>
<body>
<div style="display:none">
<div id="cboxOverlay" style="opacity: 0.9; cursor: pointer; visibility: visible;"></div>
<div id="colorbox" class="" role="dialog" tabindex="-1" style="display: block; visibility: visible; top: 421px; left: 588px; position: absolute; width: 504px; height: 104px;">
<div id="cboxWrapper" style="height: 104px; width: 504px;">
<div>
<div style="clear: left;">
<div id="cboxMiddleLeft" style="float: left; height: 62px;"></div>
<div id="cboxContent" style="float: left; width: 462px; height: 62px;">
<div id="cboxLoadedContent" style="width: 462px; overflow: auto; height: 34px;">
<div id="cboxTitle" style="float: left; display: block;"></div>
<div id="cboxCurrent" style="float: left; display: none;"></div>
<button id="cboxPrevious" type="button" style="display: none;"></button>
<button id="cboxNext" type="button" style="display: none;"></button>
<button id="cboxSlideshow" style="display: none;"></button>
<div id="cboxLoadingOverlay" style="float: left; display: none;"></div>
<div id="cboxLoadingGraphic" style="float: left; display: none;"></div>
<button id="cboxClose" type="button">close</button>
</div>
<div id="cboxMiddleRight" style="float: left; height: 62px;"></div>
</div>
<div style="clear: left;">
</div>
<div style="position: absolute; width: 9999px; visibility: hidden; display: none;"></div>
</div>
</body>
</html>

我还能尝试什么?

3 个答案:

答案 0 :(得分:3)

意外行为来自创建警报面板的颜色框内的jQuery调用顺序。如果我在onComplete函数中添加代码,一旦颜色框完成制作框就会触发,那么一切正常。

$.colorbox({width:"30%", inline:true, href:"#inline_content",
                    onComplete: function() {
                    $('#cboxClose').text('Hello World');
                 },

答案 1 :(得分:0)

使用$('#cboxClose').text('Hello World');

答案 2 :(得分:0)

如果你使用.val()它可以正常工作

<input id="cboxClose" type="button" value="Close"></input>

$(document).ready(function(){
            //Examples of how to assign the Colorbox event to elements
            $('#cboxClose').val('Hello World');
});

http://jsfiddle.net/Develop_er/NzVxK/1/