Déclenchement et liaison à des événements personnalisés?

Question

J'essaye d'écrire une boîte de dialogue de base. Je veux pouvoir spécifier un élément de lien qui lancera une boîte de dialogue quand on cliquera dessus.

I'n spécifiant ce comportement à l'aide des données attributs dans les boîtes de dialogue HTML:

<a id="launch-dialog" href="#"></a> 
<div class="dialog" data-behavior="dialog" data-trigger="#launch-dialog"> 
    <!-- dialog html --> 
</div> 

$(function(){ 
    $("[data-behavior='dialog']").dialog(); 
}); 

L'extension réelle jQuery est la partie que je vais avoir du mal à bien. Soit l'événement 'dopen' n'est pas déclenché correctement sur le corps, soit la liaison d'événement n'est pas configurée correctement. L'événement click sur le data-trigger est définitivement en train de tirer et d'être écouté cependant. Des idées pour lesquelles je ne vois jamais le journal "ouvert détecté"?

(function($) { 
    var methods = { 
    init: function(options) { 

     if (this.data('trigger')) { 
     // Add an event listener which causes the dialog to 
     // open when the correct link is clicked. 
     $(this.data('trigger')).on('click', function(e) { 
      e.preventDefault(); 
      // Trigger a global dialog open event which the dialog can subscribe to. 
      $('body').trigger('dopen'); 
     }); 
     } 
    }, 
    // Various other methods not shown. 
    }; 

    $.fn.dialog = function(method) { 

    // Method handling code not shown... 

    // Add handlers for custom events triggered on the body element. 
    $('body').bind('dopen', function(e) { 
     // This never happns: 
     console.log("Open detected"); 
    }); 

    }; 
})(jQuery); 

Answer 1

Je n'ai pas donné suffisamment d'informations dans ma question pour pouvoir résoudre le problème.

Où je

# Method handling code not shown... 

dans le code question, le code réel a les éléments suivants:

// If it corresponds to a method defined in the method object. 
if (methods[method]) { 
    return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); 
// Else, if we pass in an object and 
} else if (_.isObject(method) || !method) { 
    return methods.init.apply(this, arguments); 
} else { 
    $.error('Method ' + method + ' does not exist on jQuery.doalog'); 
} 

Comme vous pouvez le voir, cet extrait a trois chemins possibles:

1. Renvoyer le résultat d'un appel de méthode,
2. Renvoyer le résultat de un appel de méthode,
3. Soulevez une exception.

Flux de contrôle devenait raccourci dans ces chemins et n'atteignait pas la ligne où j'essaye de lier un auditeur. Bien sûr, un auditeur non lié ne peut jamais être viré.

La solution consistait à déplacer la liaison vers le haut dans la méthode d'initialisation:

var methods = { 
    init: function(options) { 

     // Add handlers for custom events triggered on the body element. 
     $('body').bind('dopen', function(e) { 
     // Now it works! 
     console.log("Open detected"); 
     }); 

     if (this.data('trigger')) { 
     // Add an event listener which causes the dialog to 
     // open when the correct link is clicked. 
     $(this.data('trigger')).on('click', function(e) { 
      e.preventDefault(); 
      // Trigger a global dialog open event which the dialog can subscribe to. 
      $('body').trigger('dopen'); 
     }); 
     } 
    }, 
    // Various other methods not shown. 
    }