jQuery KeyUp causes page to refresh
So working with an area with enter should add a result, it works but it also refreshes the page afterwards.
var targetX, targetY;
var tagCount = 0;
$(function(){
$('#tag').live('click', function(){
var iid = $(this).attr('p');
var img = $('#img-'+iid);
$(img).wrap('<div id="tag-wrapper"></div>');
$('#tag-wrapper').css({width: $(img).outerWidth(), height: $(img).outerHeight()});
$('#tag-wrapper').append('<div id="tag-target"></div><div id="tag-input">Name<input type="text" id="tag-name"><span id="savetag">Save</span> <span id="canceltag">Cancel</span></div>');
$(img).click(function(e){
mouseX = e.pageX - $('#tag-wrapper').offset().left;
mouseY = e.pageY - $('#tag-wrapper').offset().top;
targetWidth = $('#tag-target').outerWidth();
targetHeight = $('#tag-target').outerHeight();
targetX = mouseX - targetWidth/2;
targetY = mouseY - targetHeight/2;
开发者_开发百科 inputX = mouseX + targetWidth/2;
inputY = mouseY + targetHeight/2;
if($('#tag-target').css('display')=='block'){
$("#tag-target").animate({left: targetX, top: targetY}, 500);
$("#tag-input").animate({left: inputX, top: inputY}, 500);
}else{
$("#tag-target").css({left: targetX, top: targetY}).fadeIn();
$("#tag-input").css({left: inputX, top: inputY}).fadeIn();
}
$('#tag-name').focus();
$('#canceltag').click(function(){
closeTagInput();
});
$('#savetag').click(function(){
alert($('#tag-name').val());
});
$('#tag-name').live('keyup', function(e){
if (e.keyCode == 13){
$('#savetag').click();
return false;
}
});
});
});
});
As we don't see your HTML markup, I can only guess, but most probably you've got your <input>
element wrapped in a <form>
. Even if you don't specify any attributes on it, it defaults to a GET request to the current URL, and it WILL submit as soon as you press the Enter key.
The solution would be to bind a handler to the form's submit
event and call preventDefault()
.
$('form').submit(function(e){
e.preventDefault();
});
精彩评论