why is jQuery not changing the text of my button?

Question

I am using jQuery with the colorbox plugin. I want to change the text of a button w/ jquery. Following this example, jQuery change button text I added this line of code:

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

But the text of the button still says "Close"

Jfiddle shows that my code should work: http://jsfiddle.net/wTwXz/ -- but the console does not show any errors. Changing the code to .val("hello world") or .text("hello world") both don't work. Also, the HTML that shown in firebug shows that there is no other element with 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>

What else can I try?

Your code works fine: http://jsfiddle.net/wTwXz/ check the console for an error somewhere else in your code. — Rory McCrossan, Aug 22 '13 at 16:28
Check if same id used for some other element in the same page. — Biswajit Maji, Aug 22 '13 at 16:30

score 3 · Accepted Answer · answered Aug 22 '13 at 19:30

The unexpected behavior comes from the order of the jQuery calls within color box that create the alert panel. If I add the code in an onComplete function that fires once color box finishes making the box, then everything works fine.

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

score 0 · Answer 2 · answered Aug 22 '13 at 16:32

0

Use $('#cboxClose').text('Hello World');

answered Aug 22 '13 at 16:32

Muhammad Umer

17,263
19
97
168

score 0 · Answer 3 · answered Aug 22 '13 at 16:35

If you use .val() it works fine

<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/

why is jQuery not changing the text of my button?

3 Answers3