Jquery Live and Draggable
Question
I am binding a click event to an image using Jquery Live binding. The first time I click on the image the simplemodal popup launches and draggable works fine. After that, the simplemodal popup still launches and the draggable item will not drag. Any ideas?
Code of Live Click Event:
$("table tr td img:not(.Help)").live("click", function(){
$("#draggable").draggable({
containment: 'parent',
drag: function(e, ui){
alert("dragging");
}
});
$("#modal").modal({
onShow: function(){
$("html").css("overflow", "hidden");
},
onClose: function(){
$("html").css("overflow", "auto");
$("table tr td img").live("click", function(){});
$.modal.close();
}
});
});
Solution
In case anyone looks for this in the future the solution was to put the "draggable" code in the onShow callback.
$("table tr td img:not(.Help)").live("click", function(){
$("#modal").modal({
onShow: function(){
$("#draggable").draggable({
containment: 'parent',
drag: function(e, ui){
alert("dragging");
}
});
$("html").css("overflow", "hidden");
},
onClose: function(){
$("html").css("overflow", "auto");
$("table tr td img").live("click", function(){});
$.modal.close();
}
});
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow