Калькулятор цен на количество слов в Javascript

Question

Все работает отлично, за исключением проблемы с выбором плана ценообразования. Я хочу, чтобы всякий раз, когда пользователь нажимает на указанную цену (даже если текст уже присутствует в textarea), он должен немедленно обновить окончательную цену. Но сначала это не изменится.

Вместо этого я должен щелкнуть дважды. Кто-нибудь понял, что случилось?

Так вот как это выглядит:

И здесь приходит Javascript код:

function __textCalculatorCounter(){ 

    var value = $('#calculateText').val(); 
    var spanWords = $('#calculatedWordsTotal'), 
     spanChars = $('#calculatedCharsTotal'), 
     spanPrice = $('#calculatedPriceTotal'); 


    if (value.length == 0) { 
     spanWords.html(0); 
     spanChars.html(0); 
     return; 
    } 

    var selectedPricing = $("input[name=calculatePrice]:checked").val(); 
    var wordCount = value.trim().replace(/\s+/gi, ' ').split(' ').length; 
    var totalChars = value.length; 
    var totalPrice = (wordCount * parseFloat(Math.round(selectedPricing * 100)/100)); 

    spanWords.html(wordCount); 
    spanChars.html(totalChars); 
    spanPrice.html(totalPrice.toFixed(2)); 
} 

function _initTextCalculator(){ 
    var textblock = $('#calculateText'); 
    textblock.change(__textCalculatorCounter); 
    textblock.keydown(__textCalculatorCounter); 
    textblock.keypress(__textCalculatorCounter); 
    textblock.keyup(__textCalculatorCounter); 
    textblock.blur(__textCalculatorCounter); 
    textblock.focus(__textCalculatorCounter); 
    $('label', '#pricesGroup').click(__textCalculatorCounter); 
} 

==== ==== ОБНОВЛЕНО

I не знаю почему, но он отлично работает в jsfiddle ... это точно такой же код, извлеченный из html и javascript.

JSFIDDLE

Answer 1

Таким образом, поскольку ни у кого не было ответа, я отправляю мой, которая решила проблему.

Проблема заключается в стилях кнопок переключателя Bootstrap 3 в Twitter, что на самом деле является обычной проблемой при использовании вместе с javascript.

Я изменил обработчик щелчка для радиокнопок:

function _initTextCalculator(){ 
    var textblock = $('#calculateText'); 
    textblock.change(_textCalculatorTrigger); 
    textblock.keydown(_textCalculatorTrigger); 
    textblock.keypress(_textCalculatorTrigger); 
    textblock.keyup(_textCalculatorTrigger); 
    textblock.blur(_textCalculatorTrigger); 
    textblock.focus(_textCalculatorTrigger); 

    // Fixing bootstrap 3 radio buttons 
    $("#pricesGroup label").on('click', function(){ 
     // Once clicked, mark current radio as checked 
     $('input:radio', this).prop("checked", true); 
     // Then call a function to calculate the price 
     _textCalculatorTrigger(); 
    }); 
} 

Как уже комментировал, он присваивает свойство «проверено» на кнопку радио первый раз это родительский label тег щелкнул, а затем вызывает функция для вычисления цены.

Спасибо всем