[jQuery] Trouble switching elements
Hi -
I'm a jQuery newbie and so far I like what I see. But I'm having a
problem toggling elements.
I'm trying to create a form where a button switches from being a
"button"-type to a "submit"-type and back again, depending on whether
the user clicks on the button or a nearby text field. And it nearly
works - except that when the user clicks on the text field, the
button's "click" function apparently gets disabled. Has anyone
experienced anything like this before? Do you have any suggestions?
To see what I mean, I have a test page here:
http://content.hks.harvard.edu/lernerlab/participants/jquerytest.html
And here's the code I've come up with:
<html>
<head>
<title>JQuery Test</title>
<script type="text/javascript" src="/lernerlab/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button_div > input").click(function(e){
$("#button_div").html("<input type='submit'
name='sign_up' id='sign_up' value='Submit' />");
$("#_dadiv").html("Button Was Clicked");
});
$("#_text").focus(function(e){
$("#button_div").html("<input type='button'
name='sign_up' id='sign_up' value='Button' />");
$("#_dadiv").html("Text got focus");
});
});
</script>
</head>
<body>
<form action="jquerytest.html" method="get">
<input type="text" id="_text" value="some text" />
<div id="button_div"><input type="button" id="_button" value="Button" /