-1

I have been using the live jquery method for a long time and it has been working so far, however I read that the live method i deprecated and replaced by "on".

I have a couple of headers all belonging to the same class but with different IDs. When clickng one of the headers I want to open up a dialog box. In the examples below I have replaced the jquery dialog opening with a simple alert. The html code for the page is generated dynamically using php.

For the record, I am receiving an error in the javascript console in Chrome. It says Uncaught TypeError: undefined is not a function jquery:16. Also, I am calling the code below from a function that is called from document ready.

This works fine.

$(".antennaCursor").live("click", function() {
   alert("Hi");
});

This doesn't work

$(".antennaCursor").on("click", function() {
   alert("Hi");
});

Nor does this one.

$(document).live("click", ".antennaCursor", function() {
   alert("Hi");
});

This does not work.

I am including the latest jquery version. http://code.jquery.com/jquery-1.11.2.js and http://code.jquery.com/ui/1.11.2/jquery-ui.min.js

Does anyone have any advice how to fix this?

Edit: Updated the code here because it was missing some ending parentheis and semi colon. The real code was correct, though.

Here is how the code is called.

$(document).ready(function() {
  handleTheClickEvent();
});

function handleTheClickEvent() {
   $(".antennaCursor").on("click",function() {
      alert("Hi");
   });
}

Edit: Working with the code I have realized that there may be other problems with the code that are the root cause to the problems with the "on" method. Here is an update to the code. The exception handling throws an error randomly saying "TypeError: undefined is not function". Could there be a problem in the code that is causing the "on" method problem?

$( ".antennaCursor" ).live("click",function() {
try {
    var data_id = $(this).attr("id");

    url = "http://192.168.0.10/wiki/GetInformation.php?data1"+data_id+"&type=somedata";

    dial=$("<div id='dialog2' style='text-align:left; width:auto; overflow:auto'></div>");
    dial.attr("title","Data information: " + $(this).attr("id"));
    dial.html('Fetching data! <img id="graph" src="/wiki/progress.gif" />');

    dial.dialog({ position: "left"});
    dial.dialog( "option", "width", 600 );
    $.get(url,{
    getmacroinfo : $(this).attr("id"), infotype : "draw"
    }, function(data){
      if ( $( "#accordion" ).data("ui-accordion") )  {      
      $( "#accordion").accordion("destroy");
      $( "#accordion").empty();
      $( "#accordion").remove();
      }
      dial.html(data);

    });


    dial.dialog( "open" );
    return false;
} catch (err) {
    alert(err);
}
});
user1728363
  • 349
  • 1
  • 6
  • 15

4 Answers4

2

You're forgetting the closing ) on each of these. the .on() functions work fine when the syntax is correct.

example

Existing elements - 

$(".antennaCursor").on("click", function() {
   console.log("Hi");
});

Event delegation - 

$(document).on('click', '.antennaCursor', function() {
    console.log('Hi');
});

Many use document as the place to catch the bubbled event, but it isn't necessary to go that high up the DOM tree. Ideally you should delegate to the nearest parent that exists at the time of page load.

Community
  • 1
  • 1
Jay Blanchard
  • 34,243
  • 16
  • 77
  • 119
  • and the semi colon's missing jay – Billy Jan 15 '15 at 14:50
  • [Semi-colons](http://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi) are optional @Billy. I always put them just out of habit. – Jay Blanchard Jan 15 '15 at 14:52
  • intresting, I didn't know that, although I did know in certain situations you could leave them out ( only statement in function etc.). I always put them in anyway. – Billy Jan 15 '15 at 15:05
  • Sorry, the code was incorrect in my question. The real code is correct. When I change the word "live" to "on" it stops working. – user1728363 Jan 15 '15 at 17:00
  • Js fiddle works for me, however not when I try it in my code. – user1728363 Jan 15 '15 at 17:00
  • 1
    Why are you burying the click handler in another function? You'd have to handle `handleTheClickEvent()` as well as the actual click event @user1728363. When I test you code in a fiddle it works fine, but throws an error about `handleTheClickEvent()` not being defined. – Jay Blanchard Jan 15 '15 at 17:02
  • The reason I did that was to keep the document ready cleaner, because there are a bunch of other click handlers there. – user1728363 Jan 15 '15 at 17:06
  • It may look cleaner, but it is actually requiring that you have two click events. IMHO that is not a good design. [UPDATED fiddle](http://jsfiddle.net/7nogrbks/1/) – Jay Blanchard Jan 15 '15 at 17:08
  • Interesting! I have been receiving some undefined function error messages that may be related to this. I will put everything back in to document ready even though it will be really long. – user1728363 Jan 15 '15 at 17:42
  • It's all good, just make everything inside of the doc ready handler neat and orderly and you'll be in good shape. – Jay Blanchard Jan 15 '15 at 17:43
1

you'd missed the closing 

);

works now.

$(".antennaCursor").on("click", function() {
   alert("Hi");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="antennaCursor">Click</div>
Billy
  • 2,448
  • 1
  • 10
  • 13
0

If the element is dynamically added you will want this syntax to make sure the element triggers the function.

$(document).on('click', 'selector', handler);

This is the same as your last suggestion but with on instead of live. In addition you are missing the final )

So in your case would be:

$(document).on("click", ".atennaCursor", function() {
  alert("Hi");
})
Jay Blanchard
  • 34,243
  • 16
  • 77
  • 119
mikemjharris
  • 1
-1

It's just a typo. Other answers are not 100% correct, they don't really work in the same way as "live" This should work as expected, with events now and in the future

$(document).on("click", ".antennaCursor", function() {
   alert("Hi");
});
Brain Foo Long
  • 2,057
  • 23
  • 28
  • The other answers are totally correct in their use of `on()`. Look at the first examples [here](http://api.jquery.com/on/) – Jay Blanchard Jan 15 '15 at 14:57
  • False, the other answers, expect the newer answer than my own are false. They work only for already existing elements, not for future elements that currently not exist. Called "delegate" events, check here. http://api.jquery.com/on/ – Brain Foo Long Jan 15 '15 at 14:58
  • The OP has shown both examples @BrainFooLong - existinfg elements *and* delegated events. The upshot is that the OP has a typo in his code and once fixed *both* versions of his code will work if he has existing elements *and* elements needing delegation. In addition many people use `document` as the place to catch the bubbled event, but it isn't necessary to go that high up the DOM tree. Ideally [you should delegate to the nearest parent that exists at the time of page load.](http://stackoverflow.com/a/12824698/1011527) – Jay Blanchard Jan 15 '15 at 15:00
  • Yes and i wrote that the older answer are not 100% correct because the title ask "switching from live to on". So a 100% correct answer with could should show exact that behaviour. I've never said that the others are false but they didn't have shown the exact required code. So, i guess, my answer is fair and points out what is wrong with the other answer. Isn't it? Maybe i'm wrong. – Brain Foo Long Jan 15 '15 at 15:03
  • You should seek to provide a good answer. If you feel that an answer is "not 100% correct" you should make a comment on that answer. – Jay Blanchard Jan 15 '15 at 15:10
  • Allright, than it's clear why the downvote. Thx for clarification. – Brain Foo Long Jan 15 '15 at 15:28
  • The real code didn't have the syntax error. It was just when I wrote the code here that I forgot to add ");" at the end. I have updated the original code with some more information. – user1728363 Jan 15 '15 at 17:03