Question

因此使用带有输入的区域应该添加结果，它可以工作，但之后它也会刷新页面。

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

Answer 1

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

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

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

jQuery KeyUp导致页面刷新

1 个答案: