Javascript字数价格计算器

Question

Everything works fine, except the problem with a pricing plan selection. What I want is that whenever user clicks on a specified price (even while the text is already present in textarea), it should immediately update the final Price. But it won't change at first click.

I should click twice on it instead. Any one got an idea what's wrong ?

So here how it looks like:

And here comes the javascript code:

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

==== UPDATED ====

I don't know why, but it works fine in jsfiddle... it's exactly the same code extracted from html and javascript.

JSFIDDLE

Answer 1

So, since no one had an answer, I post mine, which solved the issue.

The problem is in Twitter's Bootstrap 3 radio button styles which is actually common issue when using along with javascript.

I've changed a click handler for radio buttons:

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();
    });
}

As it already commented, it assigns a property "checked" to radio button first once it's parent label tag is clicked, and then it calls a function to calculate the price.

Thanks to everyone