Question

Here we go, the variable $thislistitem, in bold below, is in the same place in my function. I seperated it to bold it. Focus on the jquery ui buttons being created and the click events.

        function activatequalifdetails($subgrid, qualId){
            $subgrid.find('.itemcontrols').hide();
            $subgrid.find("#detailedsubjects ol").on("click", "li", function(event){
                event.stopPropagation();
                        var $itemwithfoucsclass = $(".focus");
/* <![CDATA[ */         if(($itemwithfoucsclass[0] != $(this)[0]) && ($itemwithfoucsclass.length !== 0)){           /* ]]> */ 
                            $.post('<c:url value="/highschooldetailedqualifications/highschoolqualdetailedajaxupdate/"/>'+$itemwithfoucsclass.find('.itemcontrols button:nth-child(1)').attr("qualdetailid"), {grade: $itemwithfoucsclass.find('.grade').val(), yearattained: $itemwithfoucsclass.find('.yearAttained').val()});
                        }

var $thislistitem = $(this);

        $subgrid.find('#detailedsubjects ol li').not(this).removeClass('focus').find('.itemcontrols').hide();               
        $(this).addClass("focus").find('.itemcontrols').show();

            $(this).find('.itemcontrols button:nth-child(1)').button({
                icons: {
                    primary: "ui-icon-disk"
                },
                text: false
            }).unbind('click').click(function(){
                $.post('<c:url value="/highschooldetailedqualifications/highschoolqualdetailedajaxupdate/"/>'+$(this).attr("qualdetailid"), {grade: $thislistitem.find('.grade').val(), yearattained: $thislistitem.find('.yearAttained').val()}, function(data){
                    $thislistitem.removeClass('focus').find('.itemcontrols').hide();
                });
            });

            $(this).find('.itemcontrols button:nth-child(2)').button({
                icons: {
                    primary: "ui-icon-trash"
                },
                text: false
            }).unbind('click').click(function(){
                $.get('<c:url value="/highschooldetailedqualifications/highschoolqualdetailedajaxdelete/"/>'+qualId+'/'+$(this).attr("qualdetailid"), function(data){
                    $thislistitem.remove();
                });
            });

            $(this).find('.itemcontrols button:nth-child(3)').button({
                icons: {
                    primary: "ui-icon-closethick"
                },
                text: false
            }).unbind('click').click(function(){
                $thislistitem.removeClass('focus').find('.itemcontrols').hide()
            });             
    });//apply css class on click on any given item
}

The click events for the save and delete work perfectly. The click event for the cancel button however (3rd button) is giving some starnge behavior. The click logic for the 3rd button is identical to that of the save, only difference is the icon and no post id required.

When I click the cancel button, nothing happens.
If I do

.unbind('click').click(function(){
                    $thislistitem.remove();
                });

for the 3rd button, it works.

If I alert some test text, it works fine. If use removeClass() nothing occurs.
I tried copying and pasting the save function as is, change the icon and so on and left the ajax call intact. this worked fine and the focus class was removed. If I remove the ajax call and run the logic as seen in the function above, well nothing happens. Firebug reports nothing.

I have several versions of jquery loaded on this page, (1.4.3, 1.4.2, 1.5.1, 1.6.2 & 1.7.2), in that order. Could this be my problem ? I need the different versions for different plugins i am using for other things. Any ideas ?
I am totally stumped.

Answer 1

Ok so this is what I had to do, looks like a very very fundimental mistake on my behalf.

            $(this).find('.itemcontrols button:nth-child(3)').button({
                icons: {
                    primary: "ui-icon-closethick"
                },
                text: false
            }).unbind('click').click(function(){
                $thislistitem.removeClass('focus').find('.itemcontrols').hide();
                return false;
            });

All i needed to do was add return false; after my logic. Hope it helps someone out there.