Variable function in jquery

Question

i am not really good in jquery. Is it possible, to put a variable operator to make a function work? Because of different versions of jQuery used on different Pages.

The .on-function came up in 1.7 but some sites are running with lower version and therefore i need to use the .click function instead. And i want to avoid duplicate code for each version.

For example :

$('#mySelector')(var <= 3.4) ? ".click(function()" : ".on('click', function()");
{
 $( "#dialog p span" ).remove(); 
 $( "#dialog p" ).append('<span>'+ isEncHTML(html_output) 
});

Thank you all for your help.

To make it more clear:

This works with 1.7 (includes the buttons - option:

$('.delete_league, .print_league').on('click', function() 
{
 $( "#dialog p" ).append('<span>'+wpslm_v_script_vars.delete_league+'</span>');
 $( "#dialog" ).dialog({ 
 modal: true, 
 buttons: 
 [{
 text: "OK",
 click: function() 
 { 
 $( "#dialog p span" ).remove();
 $(this).dialog("close"); 
 }
 }] 
 });
});

And this work with 1.6. If i keep the buttons-option, it throws an error.

 $('.delete_league, .print_league').click(function() 
{
 // Just in case there is an old message hanging around
 $( "#dialog p span" ).remove(); 
 $( "#dialog p" ).append('<span>'+ isEncHTML(wpslm_v_script_vars.delete_league) +'</span>');
 $( "#dialog" ).dialog({ 
 modal: true
 });
});

So, i want to make the selector-line(and the buttons-option) variable so that i can use the same code for both. Means, if i see that i am running an older version than 1.7 i ust eht .click without buttons otherwise i use .on with the buttons-option. I hope that is not too confusing now.

• Nope: Your decision should be simply based on a single question: What is the lowest version I must support? The answer to that determines the jQuery library you end up using. In my personal opinion if you want to also write code for another application using later jQuery version not writing separate code pages is lazy-coding and will in the end cost you more time debugging than the time you would spend right now writing and maintaining separate code pages. Personally, I would try to make the time savings by simply writing for the lowest jQuery library.

Answer 1

i want to avoid duplicate code for each version.

If you want to write code compatible with 2 version of jQuery but you don't want to duplicate code you are better off to just write the code aiming at the lowest version your code will support.

For example, if the lowest is 1.6 then use bind for attaching events and delegate if you need to attach events to dynamically generated elements.
(click calls bind anyway in 1.6 so you might as well use bind)

Personally, I believe writing a single method to support multiple versions is a bad idea and will be hard to maintain and be insane to debug at occasions.

However, if you write 2 separate code files, targeting a specific version of jQuery, you can just include one or the other, depending on the application.

• JSS: Thanks for your answer. yes, i could do this easily. But then i have to maintain 2 files. If possible, i want to avoid that.
• Nope: @JSS: That's why I would simply write the code aiming at the lowest jQuery library you must support, that way you don't have to maintain separate code files or hack up your code everywhere.

Answer 2

Instead of checking for jquery version, check if the function exists

if($.fn.on) {
}

• JSS: ok, but that doen't keep me away from using a if-then-else for choosing the function.

Answer 3

just use .click in both cases. click is valid in jQuery 1.7

or you can do something like this

var setClick = function (selector,handler) {
 return $.fn.on ?
 function () {
 $(selector).on('click',handler)
 } 
 : function () {
 $(selector).click(handler);
 }
}

and the you can use it like

setClick("#mySelector",function () {
 $( "#dialog p span" ).remove(); 
 $( "#dialog p" ).append('<span>'+ isEncHTML(html_output) 
});

or you could add it the jQuery object

$.fn.setClick = function (handler) {
 return this.on ?
 function () {
 this.on('click',handler)
 } 
 : function () {
 this.click(handler);
 }
}

and then call it like below

$("#mySelector").setClick(function () {
 $( "#dialog p span" ).remove(); 
 $( "#dialog p" ).append('<span>'+ isEncHTML(html_output) 
});

but in all cases you end up with accomplishing nothing because all the above could have been accomplished wimply by using .click in the first place

• JSS: thanks for your answer. I know that. But the .click doesnt support the button options from the ui-framework. And i want to use this: $( "#dialog" ).dialog({ modal: true, buttons: [{ text: "OK", click: function() { $( "#dialog p span" ).remove(); $(this).dialog("close"); } }] })
• Felix Kling: @JSS: Could you please be more specific about this? What exactly are you trying to do?
• JSS: @ Felix: I want, depending on a variable, choose whether i use the .on or the .click funtion. But onli in the first Line where the Selector is.
• Felix Kling: @JSS: Yes, but why do you have to? How is this related to UI buttons? I'm just trying to find out whether you really have to do what you think you have to do and whether there is not another way. Your example does not include anything regarding jQuery UI so it's not easy to figure out what's going on.
• Rune FS: @jss and how will you cope with the UI buttons in the case where you HAVE to use click in the first palce?