Why is jQuery.insertAfter not working in this example?
The following example shows a warning, but # the text is empty .
If I comment out the .insertAfter line, then #message is displayed correctly.
Why isn't .insertAfter working in this example?
Firebug just steps over it.
JavaScript:
google.load("jquery", "1.3.2");
//run when page is loaded
google.setOnLoadCallback(function() {
$('.languageChooser select').bind('click', function() {
var numberOfItems = $('.languageChooser select option:selected').length;
$('#message').hide().html("You have selected " + numberOfItems + " " + smartPlural('language',numberOfItems) + ".").fadeIn('slow');
if(numberOfItems == 1) {
$('#message').insertAfter('<div>Use the CTRL and SHIFT keys to select multiple items.</div>');
alert('here');
}
});
function smartPlural(itemName, numberOfItems) {
if(numberOfItems == 1) {
return itemName;
} else {
return itemName + 's';
}
}
});
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>Text XHTML Page</title>
<link href="css/main.css" rel="stylesheet" type="text/css" media="all"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="javascript/main.js"></script>
</head>
<body>
<div class="languageChooser">
<div class="title">Please choose a language:</div>
<select size="4" multiple="multiple">
<option>C#</option>
<option>Ruby</option>
<option>PHP</option>
<option>VB.NET</option>
<option>JavaScript</option>
<option>Scala</option>
</select>
<div id="message"></div>
</div>
</body>
</html>
+2
source to share
3 answers
In jQuery, we are using $(element).after([html])
, not $(element).insertAfter([html])
. Just change your code to this and it should work.
google.load ("jquery", "1.3.2");
google.setOnLoadCallback (function () {
$ ('. languageChooser select'). bind ('click', function () {
var numberOfItems = $ ('. languageChooser select option: selected'). length;
$ ('# message'). hide (). html ("You have selected" + numberOfItems + "" + smartPlural ('language', numberOfItems) + "."). fadeIn ('slow');
if (numberOfItems == 1) {
//$('#message').insertAfter('Use the CTRL and SHIFT keys to select multiple items. ');
$ ('# message'). after ('Use the CTRL and SHIFT keys to select multiple items.');
alert ('here');
}
});
function smartPlural (itemName, numberOfItems) {
if (numberOfItems == 1) {
return itemName;
} else {
return itemName + 's';
}
}
});
+3
source to share
$(window).ready(function() {
//google.load("jquery", "1.3.2");
//run when page is loaded
google.setOnLoadCallback(function() {
$('.languageChooser select').bind('click', function() {
var numberOfItems = $('.languageChooser select option:selected').length;
$('#message').hide().html("You have selected " + numberOfItems + " " + smartPlural('language', numberOfItems) + ".").fadeIn('slow');
if (numberOfItems == 1) {
$('#message').append('Use the CTRL and SHIFT keys to select multiple items.');
// alert('here');
}
});
function smartPlural(itemName, numberOfItems) {
if (numberOfItems == 1) {
return itemName;
} else {
return itemName + 's';
}
}
});
});
The above is the correct code. Use append
insteed .insertAfter
.
+1
source to share