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){}}スコープの外に移動するとまったく機能しませんが、ボタンを 1 回クリックすると周囲の div が削除されるため、ボタンを 2 回#imgtag imgクリックするようなことはできません。#btnsave

代わりに入力ボタンを使用すると、実際にボタンをクリックすると2回起動するだけで、これは完全に機能します。

これが入力時に2回起動する理由はありますか?

更新#imgtag クリック機能からクリックを移動しました-おかげで、キーコードの入力もわずかに異なりますが、それでも2回起動します

$("#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イベントを再バインドしているため、おそらく2回だけでなく、画像をクリックするたびに発生します。

このようなことを試してください：

$("#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 に答える