Question

我有一个asp.net应用程序，可以在舞台上拖放对象（图像和文本）。

ASPX：

<div id="dialogFileUpload" title="Browse File" style="display:none;">
    <asp:FileUpload ID="FileUpload_IE" runat="server" Width="370px"/>
</div>

<asp:Label ID="AddText" runat="server" Text="Double Click To Edit Text" CssClass="overlapText" style="display:none;"/>

<asp:Panel ID="stage" runat="server" cssClass="containment-wrapper" style="border:1px solid #000000;" data-ajax="false">
         <asp:Image ID="imgBrowse" runat="server" Height="375px" Width="640px" ImageUrl="Image/ClickHere.png" style="cursor:pointer"/>
         <input type='file' id="inpUploader" style="display:none;"/> 
         <asp:Button ID="btn_UploadHandler" runat="server" Text="Button" OnClick="btn_UploadHandler_Click" style="display:none;"/>
</asp:Panel>

JS：

$("#stage").click(function () {
    if (navigator.appName == "Microsoft Internet Explorer") {
        $("#dialogFileUpload").dialog("open");
        $('.ui-dialog').css('z-index', 4000);
        $("#dialogFileUpload").css('opacity', 100);
        $("#dialogFileUpload").css('filter', 'alpha(opacity=100');
    }
    else {
        $('#inpUploader')[0].click();
    }
});

 $('#btnText').click(function () {
    var imageClone = $('#AddText').clone();
    $(imageClone).attr('id', "CloneText");
    $(imageClone).css({ position: 'absolute', color: 'red'});
    $(imageClone).show();
    $("#stage").append(imageClone.draggable({ containment: '#stage', cancel: null }));
});

$('#CloneText').click(function () {
    alert('YEHEY!');
    //DO OTHER STUFF
});

 $(function () {
    $(".BPOIcon").draggable({
        helper: 'clone',
        containment: '#stage',
        tolerance: 'fit'
    });
});

$(function () {
    $(".overlapText").draggable({
        helper: 'clone',
        containment: '#stage',
        tolerance: 'fit'
    });
});


$("#stage").droppable({
    drop: function (event, ui) { ////// code upon dropping the draggable to droppable
        if ($('#imgBrowse').attr('src') != "Image/ClickHere.png") {
            if (ui.draggable[0].id != "Clone" && ui.draggable[0].id != "CloneText") { /// checks if the item dropped is already a clone
                cloned = $(ui.helper).clone();
                $("#stage").append(cloned.draggable({ containment: '#stage', cancel: null }));
                $(cloned).attr('id', "Clone"); // sets the id to Clone, meaning the item is already a clone :))
                var thisOffset = $(this).offset();
                var x = ui.offset.left - thisOffset.left;
                var y = ui.offset.top - thisOffset.top;
                cloned.css({ left: x, top: y });
            }
        }
    }
})

除了$('#CloneText').click()之外，一切正常。它不会触发click事件。 stage点击事件是启动的事件。

Answer 1

变化：

$('#CloneText').click(function () {
alert('YEHEY!');
//DO OTHER STUFF
});

为：

$("#stage").on("click","#CloneText",function(){
 alert('YEHEY!');
//DO OTHER STUFF
}

<强>更新我怀疑会发生，不确定.clone正在做什么，所以我可以建议其中一个：

$("#stage").on("click","#CloneText",function(event){
 event.stopPropagation();
 alert('YEHEY!');
//DO OTHER STUFF
});

或

$("#stage").on("click","#CloneText",function(event){
event.preventDefault();
 alert('YEHEY!');
//DO OTHER STUFF
});

无法在拖放元素jquery上触发click事件

1 个答案: