How to call custom jquery function onClick

Question

hi i am new to jquery.. i want to know how to call custom jquery function by onClick attribute of html. This was the basic I was trying.Further I want to make paremetrised function and want to call that function onClick attribute.

my jquery function is:

jQuery.fn.myFadeIn=function() {
    return $('#fadeInDiv').fadeIn();
};

and the HTML is:

<input type="radio" name="contentCalls" class="radioButton" id="Calls" onclick="myFadeIn();">

<div id="fadeInDiv">
div to open
</div>

Thanks!

Answer 1

You need to assign this custom function to some element's click handler, as in:

$("#Calls").click($.myFadeIn);

What is important to note is that the function you have added to jQuery through its jQuery.fn syntax should be available as part of the $ or jQuery JavaScript objects.

Answer 2

This plugin alert()s the ID of each matched element:

jQuery.fn.alertElementId = function()
{
    return this.each(function()
    {
        alert(this.id);
    });
};

And to use it:

// alert() each a-element's ID
$("a").click(function ()
{
    $(this).alertElementId();
});

Answer 3

Replace:

jQuery.fn.myFadeIn=function() { return $('#fadeInDiv').fadeIn(); };

With:

var myFadeIn=function() { return $('#fadeInDiv').fadeIn(); };

(Assuming you are running this in the global scope)