1

因此，使用 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;
            }
        });
    });
});
});
4

1 回答 1

5

由于我们看不到您的 HTML 标记，我只能猜测，但很可能您已将<input>元素包装在<form>. 即使您没有在其上指定任何属性，它也会默认为对当前 URL 的 GET 请求，并且只要您按下该Enter键，它就会提交。

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

$('form').submit(function(e){
    e.preventDefault();
});
于 2011-05-31T08:49:44.357 回答