jquery .change not triggered in ie when using .val in a .live('keyup', function()

Question

I'm trying to do an input that only accept digit. I can have some dynamic input so I use the .live function.

On my .live('keyup') function I'm adding some "," which depends of the input length. Here's a part of my code on an input (not dynamic):

 $(document).ready(function(){
      $('#test').change(function() {
           alert('trigger change');
      });
 });


 $('#test').live('keyup', function() {
    var realDotPos = $(this).val().indexOf('.');
    var inputValue = '';
    var inputDecimals = '';
    var value = '';
    var length = 0;
    var cptMod = 0;
    var cptVirgule = 0;

    if (realDotPos == -1){
        inputValue = $(this).val().replace(/,/g, '');
    } else{
        inputValue = $(this).val().substring(0,realDotPos).replace(/,/g, '');
        inputDecimals = $(this).val().substring(realDotPos);
    }

    length = inputValue.length;
    if (length > 3){
        for(i=length-1; i>=0; --i){
            if ((cptMod != 0) && (cptMod % 3 == 0)){
                value += ',' + inputValue[i];
                ++cptVirgule;
            } else{
                value += inputValue[i];
            }
            ++cptMod;
        }
        value = value.split('').reverse().join('');
        $(this).val(value + inputDecimals);

    } else{
        $(this).val(inputValue + inputDecimals);
    }

});

The problem with this is that in ie, the .change function is not triggered when i click out of the input. FF or chrome works fine. If i remove the line $(this).val(inputValue + inputDecimals); the trigger works. What's wrong?

Answer 1

I've created this jsfiddle to test your code.

The change event does not fire in chrome for me, neither as in IE.

What you can do is trigger the change event by calling .change():

$(this).val(value + inputDecimals).change(); // or with .trigger('change')

---

Event delegation:

.live() has been deprecated in newer version of jQuery, you should look for .on() (in case you don't use the very latest version neither, check for .delegate())

Using .on() with a selector will delegate the event handling and thus handle any element (represented by the selector) inserted in the dom after it is initialized.

So here I delegate to the document, the events change/keyup for all inner element which has a class '.myinput':

I've made a fiddle for you to show the updated code, and how it works when adding dynmically new inputs: http://jsfiddle.net/didierg/xw7SV/9/

Here's the updated js code (with the optimizations and event delegation):

$(document).ready(function() {

    $(document).on('change', '.myinput', function(e) {
        alert('trigger change');
    });

    $('#test').on('keyup', '.myinput', function(e) {

        var $this = $(this),  // select 'this' only once
            currval =$this.val(),  // keep the initial value to work with
            newvalue = null,
            realDotPos = currval.indexOf('.'),
            inputValue = '',
            inputDecimals = '',
            value = '',
            length = 0,
            cptMod = 0,
            cptVirgule = 0;

        if (realDotPos == -1) {
            inputValue = currval.replace(/,/g, '');
        } else {
            inputValue = currval.substring(0,realDotPos).replace(/,/g, '');
            inputDecimals =currval.substring(realDotPos);
        }

        length = inputValue.length;

        if (length > 3) {

            for(i=length-1; i>=0; --i) {
                if ((cptMod != 0) && (cptMod % 3 == 0)){
                    value += ',' + inputValue[i];
                    ++cptVirgule;
                } else{
                    value += inputValue[i];
                }
                ++cptMod;
            }

            value = value.split('').reverse().join('');

            newvalue = value + inputDecimals;

        } else {
            newvalue = inputValue + inputDecimals;
        }

        $this.val(newvalue).change(); // call .change() to trigger the event

    });

});

---

Some notes about your code:

• You should save your selections: var $this = $(this);

• As well as the value, get it once: var val = $this.val()