Jquery Live and Draggable

Question

Hi Everyone,

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

Answer 1

Hi Everyone,

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