Question

I have an input field that can be updated by another input field, I’m trying to make a few things happen when this occurs, css changes and so on. I can’t find a good way to trigger this.

I’ve set up a jsfiddle with a simplified example.

The idea is that when a field from form one is changed the alert is triggered on form 2.

http://jsfiddle.net/8KKHK/

HTML code :

<h3>form 1</h3>
<div id="form1">
  <input type="text" data-pair="1">
  <input type="text" data-pair="2">
  <input type="text" data-pair="3">    
</div><!--#form1-->

<h3>form 2</h3>
<div id="form2">
  <input type="text" data-pair="1">
  <input type="text" data-pair="2">
  <input type="text" data-pair="3">    
</div><!--#form1-->

Javascript code :

jQuery('input').bind("change keyup input",function(){
    var d = jQuery(this).attr("data-pair");
    var value = jQuery(this).val();
    jQuery('input[data-pair="'+d+'"]').val(value);
});

jQuery('#form2 input').change("change keyup input",function(){
    var d = jQuery(this).attr("data-pair");
    alert(d);           
});

Answer 1

Use custom event (change.myown in my sample):

jQuery('input').bind("change keyup input",function(e){
                var d = jQuery(this).attr("data-pair");
                
                var value = jQuery(this).val();
                var pair=jQuery('input[data-pair="'+d+'"]');
                pair.val(value);
                pair.trigger('changed.myown',e);
                }); 



jQuery('#form2 input').bind("changed.myown",function(e,orig_event){
console.log(orig_event);
var d = jQuery(this).attr("data-pair");
alert(d);
                
});​