jQuery KeyUp вызывает обновление страницы

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>. Даже если вы не указываете какие-либо атрибуты для него, по умолчанию это GET-запрос к текущему URL, и он будет отправлен, как только вы нажмете клавишу Enter .

Решение состоит в том, чтобы связать обработчик с событием submit формы и вызвать preventDefault().

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