How to make jquery bind event work
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' butto开发者_如何学JAVAn should be firing alerts but nothing happens.
Any ideas ?
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(...)
.
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");
});
});
精彩评论