Hi everyone,
So i'm working on a default form button script, which is really easy
and i was able to get it to work. Problem is i have a div/panel
listening to click events and i need to get the default button from
the event.target property. Thing is when i trigger the default
button's click event programmatically, i get the last element before
the user hit the "enter" key instead of the button. The only way i can
get around this is to dispatch the event manually. Anybody else run
into this and is there something built into jquery to resolve this?
Here's an example:
<div id="panel">
<div id="login" style="margin: 20px; padding: 20px; width:
300px; background: #ccc;" tabindex=1>
<div style="margin: 5px 0;"><input type="text"
id="username" /></div>
<div style="margin: 5px 0;"><input type="text"
id="password" /></div>
<input type="submit" value="Sign in" id="signIn" />
</div>
</div>
<script language="javascript" type="text/javascript">
function simulateClick(obj)
{
var evt = document.createEvent("MouseEvents");
evt.initEvent("click", true, true, document.defaultView,
1, 0, 0, 0, 0, false, false, false, false, 0, null);
obj.dispatchEvent(evt);
}
$(function(){
$("#login").keypress(function(event){
if (event.keyCode == 13)
{
// does not return correct "target"
// $("#signIn")[0].click();
// this will return the correct element in the target property
simulateClick($("#signIn")[0]);
event.preventDefault();
}
});
$("#panel").click(function(event){
// i need to get the default button that was clicked, instead i'm
getting the last element before the "enter" was pressed
// so user types username and password and hits enter, i will get
"password" for event.target instead of the
// default button which actually triggered the click event.
alert(this.id + " - " + event.target.id);
});
})
</script>
