Question

I have 2 live events need to change the background color whether the user click the button on .padd or .paddc. First button is working, the background can be change but not the second button. What wrong with the code with jQuery?

<a id="hms" href="1" onClick="adduser('1'); return false;"><img id="t1" class="padd" src="tta/addr.png"></a>
    <a id="hms2" href="2" onClick="validateuser('2'); return false;"><img id="te2" class="paddc" src="tta/addr.png"></a>


$(document).ready(function(){
    var ffd = "0";
    $(".padd").live('click',function(event){
        //update profile - remove pending
        $.ajax({
            type: "POST",
            cache: "false",
            url: "pendingupd.php?pid="+event.target.id,
            success: function(aaa) {
            var ttf= "#t" + event.target.id;
                if(aaa=="Approved"){
                    $(ttf).css("background","url('tta/pass.png') 50% 50px no-repeat");
                    $(ttf).css("background-color","#ffffda");
                } else {
                    $(ttf).css("background","none");
                    $(ttf).css("background-color","none");
                }
                if(aaa=="Error"){
                    $(ttf).css("background-color","#f0b7b7");
                }
            }
        });
    });
    $(".paddc").live('click',function(event2){
        //update profile - remove pending
        $.ajax({
            type: "POST",
            cache: "false",
            url: "pendingupd.php?pid="+event2.target.id,
            success: function(aaa2) {
            var ttf2= "#te" + event2.target.id;
                if(aaa2=="Approved"){
                    $(ttf2).css("background","url('tta/pass.png') 50% 50px no-repeat");
                    $(ttf2).css("background-color","#ffffda");
                } else {
                    $(ttf2).css("background","none");
                    $(ttf2).css("background-color","none");
                }
                if(aaa2=="Error"){
                    $(ttf2).css("background-color","#f0b7b7");
                }
            }
        });
    });
});

Answer 1

The only difference between the two functions is that the first function has var ttf= "#t" + event.target.id; while the second has var ttf2= "#te" + event2.target.id; This leads me to believe that the issue is probably in the DOM. Are you sure everything has the right ID? Are those really supposed to be different?

Either way, a shorter version of that code might look like this:

$(document).ready(function(){
    var ffd = "0";
    // jQuery lets you select more than one element.
    // combining them makes what you intend more obvious.
    // and it means you create fewer functions.
    $(".padd, .paddc").live('click',function(event){
        var ttf= $(this).hasClass( ".paddc" )? "#t": "#te" ;   
        //update profile - remove pending
        $.ajax({
            type: "POST",
            cache: "false",
            url: "pendingupd.php?pid="+event.target.id,
            success: function(aaa) {      
                // replace this with ttf = "#t" if te was a typo.
                updatePendingState( aaa, ttf + event.target.id );
            }
        });
    });
});
// there is no point in having this as something created 
// EVERY time that an AJAX call is made (the old way).
function updatePendingState( aaa, selector )
{
    // initialize values to defaults.
    var bgColor = "none", bgImg = "none";
    if(aaa=="Approved"){
        // update if a change is merited.
        bgColor = "url('tta/pass.png') 50% 50px no-repeat";
        bgImg = "background-color","#ffffda";
    } else if(aaa=="Error"){
        bgColor = "#f0b7b7";
    }
    // grab the value once and use it multiple times. Why wast function calls?
    var ttf = $(selector);
    ttf.css("background",bgImg);
    ttf.css("background-color",bgColor);
}