Chiamata di una funzione definita dall'utente in jQuery

Question

Sto cercando di chiamare una funzione definita dall'utente in 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>

Ho provato quanto segue così:

$(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>

Non sembra funzionare! Qualche idea su dove mi sbaglio?

Answer 1

Se si desidera chiamare una funzione normale tramite un evento jQuery, si può fare in questo modo:

$(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

Prova questa $('div').myFunction();

Questo dovrebbe funzionare

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

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

Answer 3

Essi sono chiamati plugin, come ha commentato Jaboc. Per avere un senso, la funzione plugin dovrebbe fare qualcosa con l'elemento attraverso il quale è chiamata. Si consideri il seguente:

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

Basta provare questo . Funziona sempre.

$(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

Quello che segue è il metodo giusto

$(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"); 
}); 
​ 

dichiarazione Funzione e richiamata in jQuery.

Answer 8

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

     myFunction(); 

    }); 

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

    }; 
}); 

Put '; 'dopo la definizione della funzione ...