输入密钥为.on（）触发两次

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

这是如果我移动$('#tagName').keyup(function(event){ if(event.keyCode == 13){}}出#imgtag img范围不会在所有的工作中节省了数据

$(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. 
    }); 

的代码，但它现在是就像点击twi的#btnsave按钮ce，这应该是不可能的，因为当按钮被点击一次时，围绕的div被移除。

这实际上是完美的，当它实际上点击它只是触发两次的按钮，而不是使用输入按钮。

任何想法，为什么这会在输入时触发两次？

UPDATE我现在已经搬到了点击了#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

OK，与.keypress

，而不是

尝试

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

尝试

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

Answer 2

它可能不仅闪光两次两次，但尽可能多地点击图片，因为您要绑定图片的click函数中的keyup事件处理函数，并在每次图像点击时重新绑定新的keyup事件。

尝试是这样的：

$("#imgtag img").on('click', function(e){ 
    var imgtag = $(this).parent(), 
     mouseX = (e.pageX - $(imgtag).offset().left) - 60, 
     mouseY = (e.pageY - $(imgtag).offset().top) - 90, 
     tagit = $('<div />', { style : 'top:'+mouseY+'px; left:'+mouseX+'px;' }), 
     html = '<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>'; 

    $('#tagit').remove(); 
    $(imgtag).append(tagit.html(html)); 

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

$('#imgtag').on('keyup', '#tagName', function(e) { 
    if(e.which == 13){ 
     $('#btnsave').trigger('click'); 
    } 
});