Question

I have a page that at run time I add some control based on situations.

I write this code for mouseover event for TDs in my table:

$(".TableEntry .EntryCell").live("mouseover", function () {
var parent = $(this).parent();
parent.css("background-color", "C4F7C3");
});

and it works fine.but according to jQuery doc:

the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

I use on or delegate like this code but it does not works:

$(".TableEntry .EntryCell").on("mouseover", function () {
var parent = $(this).parent();
parent.css("background-color", "C4F7C3");
});

how I can add event handler dynamically using on or delegate?

Answer 1

You have an invalid named variable par should be parent..

You need to find a persisted parent that you will bind the event handler to ..

to simulate .live, you will need to add it to the $('body') so

$("body").on("mouseover", '.TableEntry .EntryCell', function () {
    var parent = $(this).parent();
    parent.css("background-color", "C4F7C3");
});

To use it as delegate you need to find a common persisted parent and bind to it..

$("_persisted_parent_id_tag_etc_").on("mouseover", '.TableEntry .EntryCell', function () {
    var parent = $(this).parent();
    parent.css("background-color", "C4F7C3");
});

---

So you bind to the element in the $('...') and the handler applies to the selector you pass as the second parameter (if you do pass one)