Appel d'une fonction définie par l'utilisateur dans jQuery

Question

Je suis en train d'appeler une fonction définie par l'utilisateur dans jQuery:

$(document).ready(function() { 
 
    $('#btnSun').click(function() { 
 
    myFunction(); 
 
    }); 
 
    $.fn.myFunction = function() { 
 
    alert('hi'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="btnSun">Say hello!</button>

J'ai essayé les éléments suivants ainsi:

$(document).ready(function() { 
 
    $('#btnSun').click(function() { 
 
    myFunction(); 
 
    }); 
 
}); 
 

 
function myFunction() { 
 
    alert('hi'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="btnSun">Say hello!</button>

Cela ne semble pas fonctionner! Une idée où je me trompe?

Answer 1

Si vous voulez appeler une fonction normale via un événement jQuery, vous pouvez le faire comme ceci:

$(document).ready(function() { 
 
    $('#btnSun').click(myFunction); 
 
}); 
 

 
function myFunction() { 
 
    alert('hi'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="btnSun">Say hello!</button>

Answer 2

Essayez cette $('div').myFunction();

Cela devrait fonctionner

$(document).ready(function() { 
$('#btnSun').click(function(){ 
    myFunction(); 
}); 

function myFunction() 
{ 
alert('hi'); 
} 

Answer 3

Ils sont appelés plugins , comme commenté Jaboc. Pour avoir du sens, la fonction plugin devrait faire quelque chose avec l'élément auquel elle est appelée. Considérez ce qui suit:

jQuery.fn.make_me_red = function() { 
    return this.each(function() { 
     this.style.color = 'red'; 
    }); 
}; 

$('a').make_me_red(); 

Answer 4

jQuery.fn.make_me_red = function() { 
    return this.each(function() { 
     this.style.color = 'red'; 
    }); 
}; 

$('a').make_me_red() // - instead of this you can use $(this).make_me_red() instead for better readability. 

Answer 5

Juste essayer . Cela fonctionne toujours.

$(document).ready(function() { 
 
    $('#btnSun').click(function() { 
 
    $.fn.myFunction(); 
 
    }); 
 
    $.fn.myFunction = function() { 
 
    alert('hi'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="btnSun">Say hello!</button>

Answer 6

Ce qui suit est la bonne méthode

$(document).ready(function() { 
    $('#btnSun').click(function(){ 
     $(this).myFunction(); 
    }); 
    $.fn.myFunction = function() { 
     alert('hi'); 
    } 
}); 

Answer 7

jQuery.fn.make_me_red = function() { 
    alert($(this).attr('id')); 
    $(this).siblings("#hello").toggle(); 
} 
$("#user_button").click(function(){ 
    //$(this).siblings(".hello").make_me_red(); 
    $(this).make_me_red(); 
    $(this).addClass("active"); 
}); 
​ 

déclaration de fonction et de rappel en jQuery.

Answer 8

$(document).ready(function() { 
    $('#btnSun').click(function(){ 

     myFunction(); 

    }); 

    $.fn.myFunction = function() { 
    alert('hi'); 

    }; 
}); 

Put '; 'après la définition de la fonction ...