Question

私は複数のフィールドとjqueryモーダルダイアログ（ポップアップ）を持つフォームを持っています。

フィールドの値の1つがユーザーによって変更された場合は、開いているすべてのポップアップを閉じる必要があります。

私はそれを試してみましたが、それは動作しているようだしない（changeイベントがトリガされません、私は、コンソールに「テスト」を得ることはありません）：

$("input[type='text']").change(function() { 
     console.log("test"); 
     $(".ui-dialog-content").dialog("close"); 
    }); 

にどのように任意のアイデアをそれを解決する？

Answer 1

に行くことがたくさんがありませんが、あなたが認識していますそのchangeはフィールドのぼかしでのみ発火するのですか？入力すると起動しません。 また、ハンドラをバインドする際に要素が存在しないことがあります。ページがまだロードされていないか、一部の要素が非同期にロードされている可能性があります。動的に追加された要素はどちらも機能しません。

あなたのページには、イベントハンドラ代わり

$(function() { 
    // safe here 
}); 

をバインドしようとする前に準備ができていることを確認し、元を修正するには、これは動作します

代わり

$("#parent").on("change", "input[type='text']", function() { 
    console.log("test"); 
}); 

を親のハンドラをバインドすることができます要素が親に追加されたときに関係なくこれは遅いので、最上部の要素には使用しないでください。 bodyまたは window

Answer 2

これは単にランダムな推測ですが、あなたは試してみました：

$("input[type='text']”).on('change', function() { 
    console.log("test"); 
    $(".ui-dialog-content").dialog("close"); 
}); 

は、私はあなたのソリューションは、このためのショートカットで知っていて、それが動作するはずですが、私の代わりにこれで動作するようにいくつかの要素を見てきましたショートカット。それは、スクリプトがロードされたときに要素が作成されたときと関係がある。

Answer 3

それはあなたがAutoOpenマクロを使用する場合はfalse

$("#dialog-1").dialog({ 
         autoOpen: false, // autoOpen to false 
        }); 

スクリプト動作します：

$(function() { 
       $("#dialog-1").dialog({ 
        autoOpen: false, // autoOpen to false 
       }); 
       $("#dialog-2").dialog({ 
        autoOpen: false, 
       }); 
       $("#opener").click(function() { 
        $("#dialog-1").dialog("open"); 
       }); 
       $("#opener2").click(function() { 
        $("#dialog-2").dialog("open"); 
       }); 
       $("input[type='text']").change(function() { // input changes 
        console.log("test"); 
        $(".ui-dialog-content").dialog("close"); 
       }); 
      }); 

はHTML：

<div id="dialog-1" title="Dialog Title goes here...">This my first jQuery UI Dialog1!</div> 
     <div id="dialog-2" title="Dialog Title goes here...">This my first jQuery UI Dialog2!</div> 
     <button id="opener">Open Dialog</button> 
     <button id="opener2">Open Dialog</button> 
     <input type="text" id="txt" value="" />