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

Question

J'essaie 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 également essayé ce qui suit :

$(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 de l'endroit où je me suis trompé ?

Answer 1

Si vous souhaitez appeler une fonction normale via un événement jQuery, vous pouvez procéder comme suit :

$(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 donc ceci. Ça marche 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 3

Ils sont appelés plugins comme l'a fait remarquer Jaboc. Pour avoir un sens, la fonction plugin doit faire quelque chose avec l'élément par lequel elle est appelée. Considérons ce qui suit :

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

$('a').make_me_red();

Answer 4

La méthode suivante est la bonne

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

Answer 5

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

Cela devrait fonctionner

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

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