jQuery UI nouveau problème

Question

$.widget("ui.myWidget", { 
    _init: function() { 
     //start 
     alert('Hello World!!!'); 
    } 
} 

Je le widget/ui ci-dessus

quand je l'appelle comme si ...

<div onclick="$('#id').myWidget()"> 
    Click Me 
</div> 

i obtenir le "Bonjour tout le monde !!!" boîte d'alerte. si je clique dessus encore rien ne se passe. Je ne sais pas si im manque quelque chose ... mais j'ai besoin de l'interface utilisateur pour alerter chaque fois que je clique sur la div.

Note: Ceci est un code court pour simplifier et le rendre facile à comprendre ....

Answer 1

Vous appelez le widget dans le mauvais sens. Vous voulez que votre élément devienne votre widget, vous devez donc définir votre élément de widget comme vous le feriez pour n'importe quel autre widget de jQuery UI, c'est-à-dire. $('element').scrollable(), .draggable(), etc.

A l'intérieur de votre deletion de widget, vous voulez définir tous les écouteurs et les événements pour chaque élément auquel le widget est défini. Donc, si vous voulez que quelque chose se déclenche au clic de votre élément de widget, vous devez définir un événement de clic sur this.element, en référence à l'élément de widget en cours, dans ce cas votre div.

La fonction _init est appelée une seule fois, comme tout le monde l'a dit, lors de l'initialisation de votre widget. Cependant, si vous le configurez correctement, l'événement click doit se déclencher à chaque clic de votre élément. Cela devrait aider.

HTML:

<div id="hello_world">Click Me</div> 

JS:

$.widget("ui.myWidget", { 
    _init: function() { 
    //start 
    this._show(); 
    var thisWidget = this; 
    this.options.handler.click(function(){ 
     thisWidget._show(); 
    }); 
    }, 
    _show: function(){ 
    alert('Hello World???'); 
    } 
}); 

$('div#click_me').click(function(){ 
    $('#id').myWidget({handler: $(this)}); 
}); 

Answer 2

__init est exécuté qu'une seule fois. Faites une autre fonction pour faire ce que vous avez réellement besoin de faire. Il y a une bonne introduction here

donc dans la tête ajouter le widget que vous êtes maintenant, mais avec une fonction supplémentaire pour faire le sale boulot puis changer le onclick à quelque chose le long des lignes de $('#id').myWidget.myAlertFunction()