jQuery KeyUp导致页面刷新

Question

因此，使用带有enter的区域应该添加结果，虽然它能够工作，但之后也会刷新页面。

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;
            }
        });
    });
});
});

- Bobby

Answer 1

由于我无法看到您的HTML标记，所以只能猜测，但最有可能的是您的元素包装在

中。即使您没有为其指定任何属性，它也会默认为向当前URL发出GET请求，并且只要按下Enter键，它就会提交。

解决方案是将处理程序绑定到表单的submit事件并调用preventDefault()。

$('form').submit(function(e){
    e.preventDefault();
});

- DarthJDG