Sign In
Create Account
Follow Us on Twitter
Subscribe on Youtube
2
<html>
<head>
<title>Binding Elements</title>
<style type="text/css">
ul { background-color:#DCDCDC; list-style:none; margin:0pt;
padding:0pt; width:250px;}
li { cursor:pointer; margin:10px 0px;}
</style>
</head>
<body>
<ul>
<li>India</li>
<li>USA</li>
<li>UK</li>
<li>France</li>
</ul>
<select>
<option value="Africa">Africa</option>
<option value="Antarctica">Antarctica</option>
<option value="Asia">Asia</option>
<option value="Australia">Australia</option>
<option value="Europe">Europe</option>
<option value="North America">North America</option>
<option value="South America">South America</option>
</select>
<input type="button" value="Unbind select box"/>
</body>
</html>
and then add some JQuery:
Quote
It's time to add some jQuery magic. Attach a click event handler to list items using the .bind() method, which will set the background color of the clicked item to red. Attach the change event handler to the select box, which will display the value of the selected item. Finally, add a click handler to the button. Clicking on the button will remove the event handler from the select box.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
$('input:text').bind(
{
focus: function()
{
$(this).val('');
},
blur: function()
{
$(this).val('Enter some text');
}
});
$('li').bind('click', function()
{
$(this).css('background-color', 'red');
});
$('select').bind('change', function()
{
alert('You selected: '+ $(this).val());
});
$('input:button').bind('click', function()
{
$('select').unbind('change');
});
});
</script>
I'm not sure what it means by 'list items', but I've tried adding the script in different parts of binding.html but it remains the basic html document in the first quote.
I'm using xampp but even mentioning it doesn't make sense because JQuery is client side and xampp surely shouldnt have a say in whether script is recognized or not.
I added a JQuery library extension to the CS5 Dreamweaver I'm using, though it may have been a JQuery toolbar. I don't know what I installed actually and why it would have any consequence beyond CS5 showing JQuery suggestability while you write.
Could anyone be so kind as to tell me why the script not doing as it says it should in the book? Thanks.
Back to top
