How to capture change in text when that change is through javascript function. Javascript change event is not working in this case

Question

My Code is as below.

$(document).ready(function($)
            {            
                var form = $("#video_detail_form");
                var name = $("#videoTitle");
                var nameInfo = $("#valid_videoTitle");
                function validateName(){
                    //if it's NOT valid
                    var titleValue=$.trim(name.val());
                    if(titleValue.length == 0){
                        nameInfo.text("Please Enter Title");
                        return false;
                    }
                    //if it's valid
                    else{
                            nameInfo.text("");
                            return true;
                        }
                }
                name.blur(validateName);
                name.keyup(validateName);
                name.change(validateName);

                $('#editVideoCancel').click(function(){

                    cancelVideoDetailAjaxCall( '/video/cancelVideoDetail', callBackCancelVideoDetail);
                });
            });

My cancelVideoDetailAjaxCall function changes text of the videoTitle input box. But my this code is not capturing that event by name.change.

If I change manually then it captures it. So when dynamically my callback function is changing the text then change event is not capturing it.

How should I capture that change?

you need to trigger the event manually `name.trigger("change")` or if you need to call the handler only use `name.triggerHandler('change')`. You need to do when you change the value using JavaScript — vdua, Apr 01 '13 at 03:38
Actually value is changing not only by this one function but it is being changed from many functions. So I don't want to trigger change event manually from all those functions. I want to have some code which triggers change event when the text is being changed from anywhere. — Denzz, Apr 01 '13 at 03:44
I doubt that there is any other way other than triggering the event. If you find one, please post that as an answer. Have a look at this question http://stackoverflow.com/questions/2247386/jquery-textbox-valxxxx-not-causing-change-to-fire?rq=1 This will save your precious time. — vdua, Apr 01 '13 at 04:23

score 0 · Answer 1 · answered Apr 01 '13 at 06:22

You can actually extend your value change catching to all changes coming from some script using the jQuery val method, by setting a custom setter in jQuery.valHooks.

Imagine you change the input type to myCustomType, then you will implement jQuery.valHooks.myCustomType.set method which will be called each time val is used to set the input value, and you will include your specific call here. But I insist : it is not a best practice.

You will surely find explicit code on the web for that hooks.

score 0 · Answer 2 · answered Dec 23 '15 at 15:56

As comments have mentioned, if you programmatically change the value via jQuery you must also trigger that change programmatically, if you want anything subscribed to it to register that change.

You can always make up your own events and trigger them accordingly if you don't want to "interfere" with other things already subscribed to regular events:

$el.on('mycustomevent', function() { ... })
$el.trigger('mycustomevent');

You can even subscribe with the same callback for the 'regular event' and your 'custom event':

$el.on('change', myChangeCallback);
...
$el.on('mycustomevent', myChangeCallback);

If you don't want to keep typing $el.val('...').trigger('mycustomevent') repeatedly, then declare a helper function that does that for you:

// helper function for changing the value
function changeInput(newVal) {
    if(!this.$target) this.$target = $('#text'); // stash the target for reuse
  this.$target
    // programmatically change the value; does not fire 'change' event
    .val(newVal)
    // now trigger your custom action that behaves 
        .trigger('customaction'); // add extra parameters, etc
}

Full example: https://jsfiddle.net/drzaus/ds6g745s/8/

How to capture change in text when that change is through javascript function. Javascript change event is not working in this case

2 Answers2