jqueryでプラグインを使用しているときにエラーが発生することはありませんか？

Question

私はフォントファミリについてのjQueryでプラグインを使用して：

/** 
* Font selector plugin 
* turns an ordinary input field into a list of web-safe fonts 
* Usage: $('select').fontSelector(); 
* 
* Author  : James Carmichael 
* Website : www.siteclick.co.uk 
* License : MIT 
*/ 
jQuery.fn.fontSelector = function() { 

    var fonts = new Array(
       'Arial,Arial,Helvetica,sans-serif', 
       'Arial Black,Arial Black,Gadget,sans-serif', 
       'Comic Sans MS,Comic Sans MS,cursive', 
       'Courier New,Courier New,Courier,monospace', 
       'Georgia,Georgia,serif', 
       'Impact,Charcoal,sans-serif', 
       'Lucida Console,Monaco,monospace', 
       'Lucida Sans Unicode,Lucida Grande,sans-serif', 
       'Palatino Linotype,Book Antiqua,Palatino,serif', 
       'Tahoma,Geneva,sans-serif', 
       'Times New Roman,Times,serif', 
       'Trebuchet MS,Helvetica,sans-serif', 
       'Verdana,Geneva,sans-serif' 
); 

    return this.each(function(){ 

    // Get input field 
    var sel = this; 

    // Add a ul to hold fonts 
    var ul = $('<ul class="fontselector"></ul>'); 
    $('body').prepend(ul); 
    $(ul).hide(); 

    jQuery.each(fonts, function(i, item) { 

     $(ul).append('<li><a href="#" class="font_' + i + '" style="font-family: ' + item + '">' + item.split(',')[0] + '</a><input type="hidden" id="select_font_family" value="'+item+'" /></li>'); 
     // Prevent real select from working 
     $(sel).focus(function(ev) { 

     ev.preventDefault(); 

     // Show font list 
     $(ul).show(); 

     // Position font list 
     $(ul).css({ top: $(sel).offset().top + $(sel).height() + 4, 
        left: $(sel).offset().left}); 

     // Blur field 
     $(this).blur(); 
     return false; 
     }); 

     $(ul).find('a').click(function() { 
     var font = fonts[$(this).attr('class').split('_')[1]]; 
     $(sel).val(font); 
     $(ul).hide(); 
     return false; 
     }); 
    }); 

    }); 

} 

とHTML：jQueryを使って

<input type="text" value="" id="select_font_family" /> 

：

$('input#select_font_family').fontSelector(); 
$('ul.fontselector').find('a').click(function() { 
    var test = $('input#select_font_family').val(); 
    alert(test); 
}); 

を私は上をクリックすると、その結果であるから値を取得することはできませんどのようにそれを修正するには？

Answer 1

問題が解決したかどうかは分かりませんが、フォーカスとクリックのイベントを$でN回追加すると、ループごとに1回だけ接続する必要があります。

jQuery.fn.fontSelector = function() { 

    var fonts = new Array(
       'Arial,Arial,Helvetica,sans-serif', 
       'Arial Black,Arial Black,Gadget,sans-serif', 
       'Comic Sans MS,Comic Sans MS,cursive', 
       'Courier New,Courier New,Courier,monospace', 
       'Georgia,Georgia,serif', 
       'Impact,Charcoal,sans-serif', 
       'Lucida Console,Monaco,monospace', 
       'Lucida Sans Unicode,Lucida Grande,sans-serif', 
       'Palatino Linotype,Book Antiqua,Palatino,serif', 
       'Tahoma,Geneva,sans-serif', 
       'Times New Roman,Times,serif', 
       'Trebuchet MS,Helvetica,sans-serif', 
       'Verdana,Geneva,sans-serif' 
); 

    return this.each(function(){ 

    // Get input field 
    var sel = this; 

    // Add a ul to hold fonts 
    var ul = $('<ul class="fontselector"></ul>'); 
    $('body').prepend(ul); 
    $(ul).hide(); 

    jQuery.each(fonts, function(i, item) { 

     $(ul).append('<li><a href="#" class="font_' + i + '" style="font-family: ' + item + '">' + item.split(',')[0] + '</a><input type="hidden" id="select_font_family" value="'+item+'" /></li>'); 

    }); 

    // Prevent real select from working 
    $(sel).focus(function(ev) { 

     ev.preventDefault(); 

     // Show font list 
     $(ul).show(); 

     // Position font list 
     $(ul).css({top: $(sel).offset().top + $(sel).height() + 4, 
       left: $(sel).offset().left}); 

     // Blur field 
     $(this).blur(); 
     return false; 
    }); 

    $(ul).find('a').click(function() { 
     var font = fonts[$(this).attr('class').split('_')[1]]; 
     $(sel).val(font); 
     $(ul).hide(); 
     return false; 
    }); 

    }); 

}; 

Answer 2

OK、いくつかの問題。 プラグインはすべてのフォント選択に対して新しいクリックハンドラを添付しています。 これを修正するプラグインを書き直しました。

第2に、値が更新された後にイベントをトリガし、フォントセレクタタグにもう1つのクリックイベントを登録する代わりにイベントをトリガすることをおすすめします。

はこれを試してみてください：

/** 
* Font selector plugin 
* turns an ordinary input field into a list of web-safe fonts 
* Usage: $('select').fontSelector(); 
* 
* Author  : James Carmichael 
* Website : www.siteclick.co.uk 
* License : MIT 
*/ 
jQuery.fn.fontSelector = function() { 

    var fonts = new Array(
       'Arial,Arial,Helvetica,sans-serif', 
       'Arial Black,Arial Black,Gadget,sans-serif', 
       'Comic Sans MS,Comic Sans MS,cursive', 
       'Courier New,Courier New,Courier,monospace', 
       'Georgia,Georgia,serif', 
       'Impact,Charcoal,sans-serif', 
       'Lucida Console,Monaco,monospace', 
       'Lucida Sans Unicode,Lucida Grande,sans-serif', 
       'Palatino Linotype,Book Antiqua,Palatino,serif', 
       'Tahoma,Geneva,sans-serif', 
       'Times New Roman,Times,serif', 
       'Trebuchet MS,Helvetica,sans-serif', 
       'Verdana,Geneva,sans-serif' 
); 

    return this.each(function(){ 

    // Get input field 
    var sel = this; 

    // Add a ul to hold fonts 
    var ul = $('<ul class="fontselector"></ul>'); 
    $('body').prepend(ul); 
    $(ul).hide(); 

    jQuery.each(fonts, function(i, item) { 

     $(ul).append('<li><a href="#" class="font_' + i + '" style="font-family: ' + item + '">' + item.split(',')[0] + '</a><input type="hidden" id="select_font_family" value="'+item+'" /></li>'); 
     // Prevent real select from working 
     $(sel).focus(function(ev) { 

     ev.preventDefault(); 

     // Show font list 
     $(ul).show(); 

     // Position font list 
     $(ul).css({ top: $(sel).offset().top + $(sel).height() + 4, 
        left: $(sel).offset().left}); 

     // Blur field 
     $(this).blur(); 
     return false; 
     }); 
    }); 

    $(ul).find('a').click(function() { 
     var font = fonts[$(this).attr('class').split('_')[1]]; 
     $(sel).val(font).trigger('change'); 
     $(ul).hide(); 
     return false; 
    }); 

    }); 

} 

$(document).ready(function(e) { 
    $('input#select_font_family').fontSelector(); 
    $('input#select_font_family').change(function() { 
     var test = $(this).val(); 
     alert(test); 
    }); 
});