why doesn't the $(this).attr's work? They bring back 'undefined'

Question

so I have a few buttons and because I don't want to code the same thing for each button I was trying to make a dynamic event handler that could manage all the buttons based on the .selected-pack class but all the $(this) attributes are coming back undefined although there is a value.

This is the js:

//Function In Test! 
$('.selected-pack').click(function(event) {

    if($("#mainconsole").val() == "") {
        alert("Select Your Console!")
        return;
    }


    if($("#paymentmethod").val() == "") {
        alert("Select Your Preferred Payment Method!")
        return;
    }

     $("#selectConsolediv").fadeOut("medium", function() {
                    $("#choosePlatformLI").removeClass("active");



        var packipn = $(this).attr('data-ipn');
        var packipnpp = $(this).attr('data-ipnpp');
        var packname = $(this).attr('data-name');
        var packprice = "";

                    console.log(packname);
        if ($("#mainconsole").val() == "PS"){
           packprice = $(this).attr('data-psprice');
        }

        if ($("#mainconsole").val() == "XBOX") {
           packprice = $(this).attr('data-xbprice');
        }


        // Skrill
        $("#mainamount").val(packprice);
        $("#mainipn").val(packipn);
        $("#maindesc").val(packname);
        $("#maindiscount").val($("#discount1").val());

         // PayPal
        $("#mainamountpp").val(packprice);
        $("#mainipnpp").val(packipnpp);
        $("#ppitemname").val(packname);
        $("#maindiscountpp").val($("#discount1").val());


        $("#checkoutPackName").text(packname);
        $("#checkoutCode").text($("#discount1").val());
        $("#checkoutPrice").text("£" + packprice);

                    $("#checkoutdiv").fadeIn("medium", function() {
                        $("#checkoutLI").addClass("active");
                    });
     });

});

Do any of you spot an error? Please give me a comment as soon as possible, thanks in advance :)

Do you expect `this` to refer to the clicked `.selected-pack` element or to the `#selectConsolediv` element? Based on what you're written here, I would expect it to the `#selectConsolediv` element. — apsillers, May 20 '15 at 19:17

score 2 · Accepted Answer · answered May 20 '15 at 19:18

2

It's because the scope of $(this) changes inside the fadeOut() callback. Try adding:

var self = $(this);

at the top immediately after $('.selected-pack').click(function(event) { and use self instead throughout.

answered May 20 '15 at 19:18

But those new buttons though..

21,377
10
81
108

why doesn't the $(this).attr's work? They bring back 'undefined'

1 Answers1