Why isn't jQuery selector returning an object instead of an element?

Question

Please help me understand why the following jquery select is returning an element rather than the expected object. Thanks.

<div class="partner-tab partner-tab-opaque remove4" id="tab-5"> <a href="#">
    <img class="blink" src="../skin/images/logo_endicia.png">
    </a>
</div>

code

$("<a href=\"#\" />")
    .on("click", {
    "partnerId": pid
}, function (e) {
    return showPartnerSettings(e);
})
.appendTo("#footer #tab-" + pid);

// $("<a href=\"#\" />")[ < a href = "#" >  < /a> ]

Error:

Uncaught TypeError: Object[object Object] has no method 'on'

Here's the whole function:

$(document).ready(function () {

    showPartnerTabs = function (flashUSPS) {
        $.post("<?=$this->baseUrl('partner/ajaxgetactive')?>", {}, function (data) {
            var partner = data.partners;
            //alert((data.partners).length);
            /* $("#footer .partner-tab").remove();*/
            var remove = 1;
            var doc = $(document);


            for (var id in data.partners) {


                if (partner[id].toggle_value == "on") {
                    remove++;
                    logo = partner[id].logo_file;
                    var pid = parseInt(id) + 1;

                    $("<div class=\"partner-tab partner-tab-opaque remove" + remove + "\" id=\"tab-" + pid + "\" />")
                        .appendTo("#footer");

                    $("<a href=\"#\" />")
                        .on("click", {
                            "partnerId": pid
                        }, function (e) {
                            return showPartnerSettings(e);
                        })
                        .appendTo("#footer #tab-" + pid);

                    var logochck = "tab-" + pid;
                    //alert(logochck);
                    if (flashUSPS && logochck == 'tab-5') {

                        $("<img class='blink' src='../skin/images/" + logo + "' />")
                            .appendTo("#footer #tab-" + pid + " a");
                    } else {
                        $("<img src='../skin/images/" + logo + "' />")
                            .appendTo("#footer #tab-" + pid + " a");
                    }

                    //$("</div>").appendTo("#footer");
                }

                /*
            else
            {

                $("<div class=\"partner-tab partner-tab-opaque remove" + remove + "\" id=\"tab-" + pid + "\" />")
               .appendTo("#footer");

                $("<a href=\"#\" />")
                    .on("click", { "partnerId": pid }, function(e){ return showPartnerSettings(e); })
                    .appendTo("#footer #tab-" + pid);       
                $("<img src='../skin/images/" + logo + "' />")
                    .appendTo("#footer #tab-" + pid + " a");
                //$("</div>").appendTo("#footer");  
            } 
            */
            }
            //alert($(".remove2").length);
            if ($(".remove2").length > 1) {
                $($(".remove2")[0]).remove();
                $($(".remove3")[0]).remove();
                $($(".remove4")[0]).remove();
            }
        }, "json");
    }

    $(".Partnerconnection ul li .controls .toggle-switch").on("click", null, function () {
        $(this).showPartnerTabs();
    });

    showPartnerTabs(<?=$flash?>);
});

As I mentioned in a comment, this function worked fine until I changed the function declaration from '$.fn.showPartnerTabs()...' to 'showPartnerTabs()...'. Does this help?

Which line is causing this error? Why is the error slapped in your code like that? — gen_Eric
– gen_Eric, Commented Aug 15, 2013 at 17:01
@RocketHazmat I tried to reformat the question so that it appears better, but it might need some more edit by the OP — Mark Schultheiss
– Mark Schultheiss, Commented Aug 15, 2013 at 17:02
@MarkSchultheiss: I formatted a bit better, I think. I moved the error out of the code block. — gen_Eric
– gen_Eric, Commented Aug 15, 2013 at 17:04
What does alert($.fn.jquery) give you? I expect to see a TypeError $ has no property fn which would indicate $ is not jQuery. $() alone should never return a dom element not wrapped in a jQuery object if $ is jQuery. — user400654
– user400654, Commented Aug 15, 2013 at 17:09

U.P · Accepted Answer · 2013-08-16 04:48:12Z

5

Because $("<a href=\"#\" />") is NOT a selector

You are creating a new anchor element

Other than that, your code seems to be correct. See jsFiddle

Update

Unfortunately, I am unable to reproduce the error

Uncaught TypeError: Object[object Object] has no method 'on'

But if you have changed $.fn.showPartnerTabs() to showPartnerTabs(), the this line

$(this).showPartnerTabs();

will throw this error

Object [object Object] has no method 'showPartnerTabs'

Please make sure the following is true

$ is actually jQuery and not any other library i.e. console.log($("<a href=\"#\" />") instanceof $) prints true or console.log($==jQuery) prints true
You are using jQuery 1.7+ because earlier versions have no support for .on

edited Aug 16, 2013 at 4:48

answered Aug 15, 2013 at 16:53

U.P

7,4527 gold badges43 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gen_Eric Over a year ago

.on() does work newly created elements: jsfiddle.net/psmb7 The $() function always returns a jQuery object, so has no method 'on' should never appear. Something else is causing that error.

Alex Funk · Accepted Answer · 2013-08-15 16:54:12Z

2

You are creating a new element. If you want to select:

<a href ="#">

Use an appropriate selector, in your case:

$('div.partner-tab a')

answered Aug 15, 2013 at 16:54

Alex Funk

4351 gold badge3 silver badges11 bronze badges

Comments

Mark Schultheiss · Accepted Answer · 2013-08-15 17:13:39Z

0

I am going to go out on a limb here and suspect you may need:

$("div.partner-tab").on("click", 'a', {
    "partnerId": pid
}, function (e) {
    return showPartnerSettings(e);
});

answered Aug 15, 2013 at 17:13

Mark Schultheiss

34.3k13 gold badges75 silver badges117 bronze badges

Collectives™ on Stack Overflow

Why isn't jQuery selector returning an object instead of an element?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related