Ошибка не может получить значение при использовании плагина в 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:

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

с JQuery:

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

Когда я нажимаю на это результат не может получить значение из , как это исправить?

Answer 1

Я не знаю, исправили ли вы проблему, но вы прикрепляете фокус и щелкните события N раз в $ .each, он должен быть прикреплен только один раз за пределами каждого цикла.

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

ОК, несколько проблем. Плагин прикрепляет новый обработчик кликов для каждого выбора шрифта. Я переписал плагин, чтобы исправить это.

Во-вторых, я рекомендую запускать событие после обновления значения и привязываться к нему вместо того, чтобы регистрировать еще одно событие click в теге селектора шрифтов.

Попробуйте это:

/** 
* 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); 
    }); 
});