How to make jquery bind event work

Question

For some reason my bind events won't work. You can see my code here: http://dl.dropbox.com/u/145581/MyPage/default.html

Clicking on 'Add gadget' or the 'Remove gadget' button should be firing alerts but nothing happens.

Any ideas ?

Answer 1

Your calls to bind are made outside of your $(document).ready( ) handler, so your elements aren't there yet. Either move them into $(document).ready() or use jQuery's live(...).

Answer 2

First, make sure you move your bind() methods inside the $(document).ready() event. Since they are being called before the DOM is ready (namely before those DOM elements even exist) there is no way for an event to be bound to them.

Also, passing in objects to bind() isn't supported until jQuery 1.4. (You can use the code I have below, or upgrade to 1.4 to use your bind() methods as is. (you'll still need to move them to inside the ready() event.

$(document).ready(function(){
    // enable sortable on all columns
    // this will add drag-and-drop functionality as well
    $("#mypage_column1").sortable({
        items: '.gadget', // the type of element to drag
        handle: 'h2', // the element that should start the drag event
        opacity: 0.9, // opacity of the element while draging
        connectWith: ["#mypage_column2"]
    });

    $("#mypage_column2").sortable({
        items: '.gadget', // the type of element to drag
        handle: 'h2', // the element that should start the drag event
        opacity: 0.9, // opacity of the element while draging
        connectWith: ["#mypage_column1"]
    });

    $("img.btn_delete").bind('click', function() {
        alert("Removing this gadget");
      });

    $("img.mypage_add_gadget").bind('click', function() {
        alert("Adding a new gadget");
      });
});