Evento personalizzato semplice in jquery

Question

Sto cercando di imparare eventi personalizzati jquery.

Devo attivare un evento semplice al caricamento della pagina.

HTML:

<div id="mydiv"> my div</div> 

Devo chiamare il mio proprio evento per sparare un avviso

$("#mydiv").custom(); 

ho provato il codice qui sotto.

function customfun() 
    { 
     $("#mydiv").trigger("custom"); 
    } 

    $(document).ready(function() { 

     $("#mydiv").bind(customfun, function() { 
      alert('Banana!!!'); 
     }); 

    }); 

Answer 1

Per chiamare gli eventi personalizzati come le funzioni di jQuery è necessario, beh, definire una tale funzione tramite $.fn:

$(document).ready(function() { 
    //define the event 
    $(document).on('custom', function() { 
     alert('Custom event!'); 
    }); 

    //define the function to trigger the event (notice "the jquery way" of returning "this" to support chaining) 
    $.fn.custom = function(){ 
     this.trigger("custom"); 
     return this; 
    }; 

    //trigger the event when clicked on the div 
    $("#mydiv").on("click", function() { 
     $(this).custom(); 
    }); 
}); 

Answer 2

È necessario associare allo stesso nome evento - "personalizzato" - come quello attivato. Come questo:

$("#mydiv").on("custom", function() { ... 

Fiddle

Answer 3

si può chiamare così facendo:

$.fn.mycustom = function(){ 
    return this; 
}; 

$("div").mycustom();