Question

我有一个允许用户标记图像的系统，他们点击图像并显示框以输入他们的朋友姓名，然后从自动完成中选择他们点击保存按钮或点击输入

$("#imgtag img").click(function(e){ // make sure the image is clicked
        var imgtag = $(this).parent(); // get the div to append the tagging entry
        mouseX = e.pageX - $(imgtag).offset().left; // x and y axis
        mouseY = e.pageY - $(imgtag).offset().top;
        mouseY = (mouseY-60);
        mouseX = (mouseX-90);
        $('#tagit').remove(); // remove any tagit div first
        $(imgtag).append('<div id="tagit"><div class="box"></div><div class="name"><input type="text" name="name" id="tagName" /><input type="button" name="btnsave" value="Save" id="btnsave" /><input type="button" name="btncancel" value="Cancel" id="btncancel" /></div></div>');
        $('#tagit').css({top:mouseY,left:mouseX});

        $("#tagName").autocomplete({        
            source: data,
            select: function( event, ui ) {
                $( "#tagName" ).val( ui.item.label); 
                return false;
            }
        });

        $('#tagName').focus();

        $('#tagName').keyup(function(event){ // this fires twice
            if(event.keyCode == 13){
                $('#btnsave').trigger('click');
            }
        });
    });

这是保存数据的代码

$(document).on('click', '#btnsave', function() {
        name = $('#tagName').val();
        counter++;
        $('#taglist ol').append('<li rel="'+counter+'"><a>'+name+'</a> (<a class="remove">Remove</a>)</li>');
        $('#imgtag').append('<div class="tagview" id="view_'+counter+'"></div>');
        $('#view_' + counter).css({top:mouseY,left:mouseX});
        $('#tagit').fadeOut();
        // add backend code here, use mouseX and mouseY for the axis and counter.
    });

如果我将$('#tagName').keyup(function(event){ if(event.keyCode == 13){}}移出#imgtag img范围，它根本不起作用，但现在就像点击#btnsave按钮两次，这不应该可以在单击按钮一次时删除周围的div。

如果我使用输入按钮而实际点击它只会触发两次按钮，这非常有效。

为什么这会在输入时触发它两次？

更新我现在已经将#imgtag点击功能的点击移出了 - 多亏了这一点，输入密钥代码略有不同但仍然点火两次

$("#imgtag img").click(function(e){ // make sure the image is clicked
    var imgtag = $(this).parent(); // get the div to append the tagging entry
    mouseX = e.pageX - $(imgtag).offset().left; // x and y axis
    mouseY = e.pageY - $(imgtag).offset().top;
    mouseY = (mouseY-60);
    mouseX = (mouseX-130);
    $('#tagit').remove(); // remove any tagit div first
    $(imgtag).append('<div id="tagit"><div class="box"></div><div class="name"><input type="text" name="name" id="tagName" /><input type="button" name="btnsave" value="Save" id="btnsave" /><input type="button" name="btncancel" value="Cancel" id="btncancel" /></div></div>');
    $('#tagit').css({top:mouseY,left:mouseX});


$("#tagName").autocomplete({        
    source: "/ajax/fbFriendsAutoC.php",
    select: function( event, ui ) {
    $( "#tagName" ).val( ui.item.name ); // on select place friend name to input
    $( "#uid" ).val( ui.item.uid ); // temp place for uid
    return false;

    }
    }).data( "ui-autocomplete" )._renderItem = function( ul, item ) { // how our list will looks
return $( "<li></li>" )
.append( "<a><img src='" + item.pic_square + "' height=32 /><div class='fbName'>" + item.name + "</div></a>" )
            .data( "item.autocomplete", item ) .appendTo( ul );
        };
    $('#tagName').focus();  
    });

$(document).keyup(function(e) {
    if (e.keyCode == 13) { $('#btnsave').trigger('click'); }     // enter
    if (e.keyCode == 27) { $('#tagit').fadeOut(); }   // esc
});

$(document).on('click', '#btnsave', function() {
    uid = $('#uid').val();  
    var hdnValue = $('#tags').val();
    $('#tags').val(hdnValue + uid + ','+ mouseX + ',' + mouseY + ',');
    name = $('#tagName').val();
    counter++;
    $('#taglist ul').append('<li rel="'+counter+'"><a>'+name+'</a> (<a class="remove">Remove</a>)</li>');
        $('#imgtag').append('<div class="tagview" id="view_'+counter+'"></div>');
    $('#view_' + counter).css({top:mouseY,left:mouseX});
    $('#tagit').fadeOut();      
});

Answer 1

它可能不仅会触发两次，而且会在您单击图像时多次触发，因为您在图像的keyup函数内绑定click事件处理程序，重新绑定一个新的{{每次点击图片都会发生1}}事件。

尝试这样的事情：

keyup

Answer 2

好的，试试.keypress

而不是

.keyup(function(event){ // this fires twice
        if(event.keyCode == 13){

试

.keypress(function(event) {
        if(event.which == 13) {

输入.on（）的键会触发两次

2 个答案: