0

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

$("#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();      
});
4

2 回答 2

2

它可能不仅会触发两次，而且在您单击图像时触发多次，因为您将keyup事件处理程序绑定到图像的函数内部，每次单击图像时都会click重新绑定一个新事件。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');
    }
});
于 2013-05-27T11:29:06.260 回答
1

好的，试试.keypress

代替

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

尝试

.keypress(function(event) {
        if(event.which == 13) {
于 2013-05-27T11:36:08.577 回答