Как сделать работу события jquery bind

Question

По какой-то причине события привязки не будут работать. Вы можете увидеть мой код здесь: http://dl.dropbox.com/u/145581/MyPage/default.html

Нажав на кнопку «Добавить гаджет» или кнопку «Удалить гаджет», вы должны активировать оповещения, но ничего не происходит.

Любые идеи?

Answer 1

Во-первых, убедитесь, что вы перемещаете свои методы bind() внутри события $(document).ready(). Поскольку они вызываются до того, как DOM готов (а именно, до того, как эти элементы DOM даже существуют), невозможно связать событие с ними.

Кроме того, передача объектов в bind() не поддерживается до jQuery 1.4. (Вы можете использовать код, который я ниже, или обновить до 1.4, чтобы использовать ваши bind() методы, как есть. (Вы все еще нужно, чтобы переместить их внутри ready() события.

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

Answer 2

Ваши звонки на bind сделаны за пределами вашего обработчика $(document).ready(), поэтому ваших элементов еще нет. Либо переместите их в $(document).ready(), либо используйте jQuery's live(...).