CODEWITHSUNDEEP
jquery
MMakati
MMakati

Reputation: 703

cannot fire click event on drag and drop element jquery

I have an asp.net application that can drag and drop objects (Images and Text) on stage.

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 });
            }
        }
    }
})

Everything works fine except for $('#CloneText').click() It doesn't fire the click event. The stage click event is the one firing up.

Upvotes: 0

Views: 816

Answers (1)

Emil Borconi
Emil Borconi

Reputation: 3467

Change:

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

to:

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

UPDATE I suspected that will happen, not sure about what the .clone is doing, so I can suggest one of this 2:

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

or

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

Upvotes: 1

Related Questions