使用.on()事件的变量，自定义jQuery插件中的侦听器不会触发 [英] Listener in custom jQuery Plugin not firing, using a variable for .on() event

问题描述

我正在从

I'm spinning an answer from this question into a jQuery Plugin, but I'm running in to issues. I'm using a variable as the event in .on(), but the listener never fires.

jQuery

(function ($) {
    $.fn.randomLetterStyles = function( options ) {

      var settings = $.extend({
          colors: ["#ddd", "#333", "#999", "#bbb"],
          sizes:["12"],
          type:"hover",
          defaultColor: "#999",
          defaultSize: "12"
        }, options );

      //both of these appear in console
      console.log("check 1");
      console.log(settings.type);

        $(this).on(settings.type, function() {
          //this does not appear in console
          console.log("check 2");

          wrapLetters(this);
          $('.random-styles', this).css('color', function(){
              var idx = Math.floor(Math.random() * settings.colors.length);
              return settings.colors[idx];
          });
          $('.random-styles', this).css('color', function(){
              var idx = Math.floor(Math.random() * settings.sizes.length);
              return settings.sizes[idx];
          });
          $('.random-styles', this).css('font-size', function(){
              var idx = Math.floor(Math.random() * settings.sizes.length);
              return settings.sizes[idx];
          });
      }, function(){
          $('.random-styles', this).css({'color':settings.defaultColor, 'font-size':settings.defaultSize});     
  }); 
};


//Recursive function by Logan Smyth
// Wrap every letter in a <span> with .random-color class.
function wrapLetters(el){
  if ($(el).hasClass('random-styles')) return;

  // Go through children, need to make it an array because we modify
  // childNodes inside the loop and things get confused by that.
  $.each($.makeArray(el.childNodes), function(i, node){
    // Recursively wrap things that aren't text.
    if (node.nodeType !== Node.TEXT_NODE) return wrapLetters(node);

    // Create new spans for every letter.
    $.each(node.data, function(j, letter){
        var span = $('<span class="random-styles">').text(letter);
        node.parentElement.insertBefore(span[0], node);
    });

        // Remove old non-wrapped text.
        node.parentElement.removeChild(node);
      });
    }
} ( jQuery ));

$(document).ready(function() {
    $("#firstBox").randomLetterStyles();
    $("#secondBox").randomLetterStyles();
    $("#thirdBox").randomLetterStyles();
});

HTML

<div id="firstBox">This box works on hover!</div>
<div id="secondBox">This box works on click!</div>
<div id="thirdBox">This box has custom settings!</div>

小提琴.

推荐答案

.on('hover', function)与.hover(function, function)不同-它不接受两个函数.删除第二个事件，然后触发事件.

.on('hover', function) is not like .hover(function, function) - it doesn't accept two functions. Remove the second one and the events trigger.

http://jsfiddle.net/U78RV/4/

您仍然可以创建这两个事件

You can still create those two events

$("#firstBox").randomLetterStyles({type: 'mouseover', ...}).randomLetterStyles({type: 'mouseout', ...});

这篇关于使用.on()事件的变量，自定义jQuery插件中的侦听器不会触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！