CODEWITHSUNDEEP
javascriptjquerydom
Evan Bashir
Evan Bashir

Reputation: 5551

Having trouble unbinding a function

I have 4 images of people, each person has 4 images of food that corresponds with them. When the name of a person is clicked, it bolds their name. It un-bolds if you click another name.

The second thing I'm trying to do, is have the food images switch when you click on each person. So far, they just seem to be compiling, and not dumping the previous. I tried unbinding the functions that pull in the images to try and have the images disappear when you click a new name, but I can't make it work!

Anyone know what I can do? All help is greatly appreciated!

$(document).ready(function(){
  $('a').click(function(){
    $(".onclick").removeClass('onclick');
    $(this).addClass('onclick');
    return false;
  });
  $('#Jim').click(function(){
    groceryList (Jim);
    $("#Jim").unbind();
    return false;
  });
  $('#Jane').click(function(){
    groceryList (Jane);
    $("#Jane").unbind();
    return false;
  });
  $('#Bob').click(function(){
    groceryList (Bob);
    $("#Bob").unbind();
    return false;
  });
  $('#Roberta').click(function(){
    groceryList (Roberta);
    $("#Roberta").unbind();
    return false;
  });
});

Upvotes: 2

Views: 55

Answers (3)

Jai
Jai

Reputation: 74738

You have to pass the event in the .unbind(event):

$("#yourselectors").unbind('click');

Note:

You have not setup your fiddle correctly so it is little difficult to see what is going in your fiddle.

Upvotes: 1

Ja͢ck
Ja͢ck

Reputation: 173562

What you have to do, instead of unbinding the click handler, is to clear the food area before you add the next batch of items:

function groceryList (a){
    "use strict";

    $('#food').children(':not(h2)').remove();
    // the rest of your function
}

Upvotes: 1

John
John

Reputation: 539

$("#Jim").unbind().click(function (e) {

 //your content here 

 }

with that your click is bind or unbind properly may be

Upvotes: 1

Related Questions