無法觸發拖放元素的點擊事件jquery

我有一個可以在舞臺上拖放對象（圖像和文本）的asp.net應用程序。無法觸發拖放元素的點擊事件jquery

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點擊事件是點燃事件。

來源

2014-02-15 MMakati

你能提供一個小提琴嗎？它在我看來，你會有多個元素與稱爲克隆的id - 不是真正好的id應該是唯一的。什麼是.clone（）函數在做什麼？可能你應該使用（「#stage」）on（「click」，「＃CloneText」，function（）{//你的代碼;}）; –

我不能因爲我使用asp控件。我需要一個用於克隆標籤控件的克隆，並將其添加到舞臺上。 – MMakati

變化：

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

到：

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

UPDATE 我懷疑這會發生，不知道什麼.clone在做什麼，所以我可以建議的這一個2 ：

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

來源

2014-02-15 16:42:14

它可以工作，但在警告之後，但$（「＃stage」）。click（）事件也在觸發。任何解決方案？ – MMakati

你救了我的命！謝謝。 – MMakati

無法觸發拖放元素的點擊事件jquery

回答

相關問題