jquery - 別の入力フィールドの更新によって更新された入力に基づいて変更をトリガーする

Question

別の入力フィールドで更新できる入力フィールドがあります。これが発生したときに、css の変更など、いくつかのことを実行しようとしています。これをトリガーする良い方法が見つかりません。

簡単な例でjsfiddleをセットアップしました。

フォーム 1 のフィールドが変更されると、フォーム 2 でアラートがトリガーされるという考え方です。

http://jsfiddle.net/8KKHK/

HTML コード :

<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 コード :

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

カスタムイベントを使用change.myownします（私のサンプルでは）：

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