Neither .on or .live functions are recognized

Question

I am so frustrated right now. I have been trying for the past half hour to get event delegation to work. I tried using .on and Chrome told me that it wasn't a function.

I searched this question

$(...).on is not a function - jQuery Error

and thought it was because I was using an earlier version of JQuery. Because of that, I decided to include the latest version of JQuery from the Google Developer's website

https://developers.google.com/speed/libraries/

Here's what I included at the end of my body tag

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

I thought that would solve the problem

If I click on the link under View Source (Ctrl + u) and click on the JQuery file, I get source code, which leads me to believe it was loaded properly.

I also tried to use the .live function and found out that wasn't a function either. There's almost no chance I have a syntax error either

$("td > a")[0].on("click", function() { alert('hi') })

Yet, I get the following output from the console

Uncaught TypeError: $(...)[0].on is not a function at :2:16 at Object.InjectedScript._evaluateOn (:895:140) at Object.InjectedScript._evaluateAndWrap (:828:34) at Object.InjectedScript.evaluate (:694:21)

I also tried copying and pasting the minified JQuery code into a JavaScript file, and including that way, but that also failed.

Is it an issue with the Content Distribution Network(CDN) or a problem with the version itself?

I know that JQuery 2 only supports modern browsers, but I am using Google Chrome. I can not understand what the problem is.

Has anyone else ran into this problem before? Help or advice is most appreciated.

Edit:

`jquery.fn.jquery` returns `2.1.3`

Answer 1

You're attempting to apply a jQuery method to a raw DOM object. With the index specified you no longer have a jQuery object selected.

Also, the way you've structured your on() function doesn't employ event delegation. Try this:

$(document).on("td > a:eq(0)", "click", function() { alert('hi') });