4

ユーザーがユーザーを連絡先リストに追加できるフォームがあります。ユーザーが追加するユーザーを選択できる複数の選択ボックスがありますが、ユーザーがリストにない人を追加できるようにしたいです。そのため、新しいユーザーが選択されたときに、ユーザーを作成するためのフォームが表示されたモーダル ダイアログが表示されるようにします。この同じフォームは、使用されているボックスに関係なく表示されます。そのため、すべて同じクラス名を付け、次のコードを使用して新しいユーザー オプションを検出しています。

$(function()
{
    $( ".select-user" ).change(function()
    {
        alert("List Changed");
            if ($(this).val() == 'new')
            {
                $( "#dialog-form" ).dialog( "open" );
                updateTips("* indicates a mandatory field.");
            }
    });
});

ただし、このイベントをトリガーしているのは最初のボックスのみです。最初の選択は次のように定義されます。

<select id ="select-user" class = "select-user" name="foo">

他のボックスはすべて同じで、非表示になっています。

<select style="visibility:hidden" class="select-user" id="select-user-$index" name="bar">

そして、それらは次のコードによって可視化されています:

document.getElementById('select-user-$index').style.visibility = "visible";

最初の選択以外では、.change イベントがまったくトリガーされないことを確認しました。イベントがどのようにトリガーされるかについて、私が見逃しているものはありますか?

編集: isherwood の回答で述べたように、jsfiddle で選択ボックスのコードを分離すると、期待どおりの動作が得られます。そのため、ページに関する追加情報をいくつか。どちらの選択も (ほぼ) 同じ php によって生成されています。ほとんどの部分をコピーして貼り付けましたが、追加のボックスを非表示にする行を追加し、ID を変更しただけです。

どちらの選択も同じ形式です。最初のものはテーブルの中にありますが、追加のものは にスローされています。

最初の 2 つの後のすべての選択ボックスは、javascript を介して追加されています。

4

1 に答える 1

2

http://jsfiddle.net/tLYDB/2/

$(function () {
    $(".select-user").each(function () {
        $(this).change(function () {
            alert("List Changed");

            if ($(this).val() == 'new') {
                $("#dialog-form").dialog("open");
                updateTips("* indicates a mandatory field.");
            }
        });
    });
});
于 2013-03-05T01:19:36.033 に答える