Trying to unbind click event and attach new event

Question

I am trying to unbind the click event and attach another click event after the button is clicked once.

<small id="selectall_agriculture" onclick="refineSearch.testing('agriculture')">(select all)</small>

After the testing function is run, I want the selectAllPropertyTypesInGroup() function to run, but instead, the testing function is called everytime. If I take the onclick event out of the small tag and trigger the setGroupHeaderNotAllSelected() from another front end control, the click event that is created with $('#selectall_' + groupName).click() in the setGroupHeaderNotAllSelected() function works. I feel like the unbind is not working because the click event is hard coded into the small tag. Any suggestions?

refineSearch.testing = function (groupName) {
    console.log("Click event from front end running instead of the one binded");
    setGroupHeaderNotAllSelected (groupName);
};

var setGroupHeaderNotAllSelected = function (groupName) {
    $('#selectall_' + groupName).unbind('click');
    $('#selectall_' + groupName).click(function () {
        selectAllPropertyTypesInGroup(groupName);
        return false;
    });
};

Answer 1

Per jQuery doc the unbind method is deprecated, use off instead ( click is fine, but you may look at on method also)

$('#selectall_' + groupName).off('click').click(function () {
    selectAllPropertyTypesInGroup(groupName);
    return false;
});

Also, you need to choose between declarative onclick attribute set and jQuery binding. So instead on onclick attribute using, I would add the hanlder via script on the App start

$('#selectall_agriculture').click(function() { 
  refineSearch.testing('agriculture');
});