輸入密鑰爲.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'); 
    } 
});