jquery中onclick（function（）{}）和on（'click'，function（）{}）函数有什么区别

Question

I am trying to load pages in one div using ajax : this is my HTML code :

 <ul id="nav" class="nav" style="font-size:12px;">
    <li><a href="#" id="m_blink">Tab1</a></li>
    <li><a href="#" id="d_blink">Tab2</a></li>
    <li><a href="#" id="k_blink">Tab3</a></li>
</ul>
<div id='home'></div>

When i am calling the pages in one div that is 'home' div like this :

$(document).ready(function(){

     $("#m_blink").onclick(function() {
        $("#home").load("tab1.php",{},function(){});
     });

     $("#d_blink").onclick(function() { 
        $("#home").load("tab2.php",{},function(){});
     });

     $("#k_blink").onclick(function() { 
        $("#home").load("tab3.php",{},function(){});
     });
});

In chrome and Firefox when i inspect element the error is :

In chrome :

'Uncaught TypeError: undefined is not a function'

and in firefox :

[12:15:46.575] TypeError: $(...).onclick is not a function

and when i changed my jquery code to like this

$(document).ready(function(){

     $("#m_blink").on('click', function() {
        $("#home").load("tab1.php",{},function(){});
     });

     $("#d_blink").on('click',function() { 
        $("#home").load("tab2.php",{},function(){});
     });

     $("#k_blink").on('click',function() { 
        $("#home").load("tab3.php",{},function(){});
     });
});

When i execute this code this is working , what is the difference between the onclick functions in jquery.

Answer 1

There is no onclick function in jquery. So the error is correct and self-explanatory.

TypeError: $(...).onclick is not a function

You should use .click(), which is a shortcut for .on("click", handler)

$(selector).click(function() {
});