jQuery - Replacing .live() with .on()

JavaScript
1

I have been replacing .live with .on throughout my site and below is a simple example. The code below is simple to update.

// .live()
$("a.action_delete").live('click',function(){
// Replaced .live() with .on()
$(document).on('click', '[id^=docs_mgr_upload_]', function(){

However, I have this line of code that I need to replace the .live with .on but can it be done in a single line?

$("input[id^='question_'], label[for^='no_'], label[for^='yes_']", $rounded_box_mid).live('click', function(){

Any recommendations will be greatly appreciated.

2

Maybe this will work:

var $selectors = $("input[id^='question_'], label[for^='no_'], label[for^='yes_']").add($rounded_box_mid);

$(document).on('click', $selectors, function(){
     // code...
});
3

Thanks for the response. Unfortunately, this did not work. Let me give another example.

$("td.chk_icon", $("table.tablesorter")[0]).live('click', function(){ // need to convert to use .on()

I have tried the following ideas but none of them work.

// attempt A - Unsuccessful since 2nd part of the selector (i.e., $("table.tablesorter")[0]) will be interpreted as data
$(document).on('click', "td.chk_icon", $("table.tablesorter")[0], function(){ 

// attempt B - Unsuccessful when ref jQuery object for selector
var $selector = "td.chk_icon", $("table.tablesorter")[0];
$(document).on('click', $selector, function(){

Any other recommendations?

4

Could you post a link to a page where I can see this working using the live method?

5

Unfortunately it is an intranet site so you can’t access it.

6

Can you then post enough code that I can reproduce this at my end?
Shouldn’t be difficult.

7

First of all, thank you for your willingness to help! The page related to my original post (see below) is a very complicated page and it would be easier to look at a generic example.

// Original code using .live with a click event
$("input[id^='question_'], label[for^='no_'], label[for^='yes_']", $rounded_box_mid).live('click', function(){

Let’s just look at a generic example where .live() needs to be updated with .on().

$('[id^=generic1_id_]', '[id^=generic2_id_]').live('click', function(){ // generic example

To convert to .on(), I could create two working examples seen below, but then I have to re-use code in both, whereas with the .live() example, I am able to reference both selectors and the code will be executed on a click event for either selector. Also, I am using .live() because the click handler needs to apply to new elements added/created after the DOM is loaded. I know the .on() examples below will work for existing and new elements, but I must separate them because I can’t figure out how to write the code where it will apply to both selectors while using the .on() syntax.

// Generic Example - Click handler for elements with an IDs beginning with "generic1_id_"
$(document).on('click', '[id^=generic1_id_]', function(){

}

AND

// Generic Example - Click handler for elements with an IDs beginning with "generic2_id_"
$(document).on('click', '[id^=generic2_id_]', function(){

}

I have tried this but it is not correct because the ‘[id^=generic2_id_]’ will be interpreted as data not as a 2nd selector.

$(document).on('click', '[id^=generic1_id_]', '[id^=generic2_id_]', function(){ // Won't work

There is surprisingly little I can find in searches to find anything beyond simple examples of converting .live() to .on().

8

I finally have the answer. Thank you Pullo for working with me on this issue.

// Correct way to use two selectors
$(document).on('click', '[id^=generic1_id_],[id^=generic2_id_]', function(){
9

Hi,

Glad you got it sorted :slight_smile:

This is indeed the correct way to use multiple selectors.

I think I must have misunderstood the question though, as I had though you were having trouble using multiple selectors and cached selectors at the same time ($rounded_box_mid in this case).

I’m curious. How did you solve that?