jquery - 让多个选择框打开同一个模式对话框

Question

我有一个表单，允许用户将用户添加到联系人列表。我有多个选择框，允许用户选择要添加的用户，但我也希望用户能够添加不在列表中的人员。因此，当选择新用户时，我希望弹出一个模式对话框，其中包含用于创建用户的表单。无论使用哪个框，都应该显示相同的表单。因此，我给了它们相同的类名，并且我使用以下代码来检测新的用户选项。

$(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.ini 生成的。我复制并粘贴了它的大部分内容，但只是添加了几行来隐藏附加框并更改了 id。

两个选择的形式相同。第一个位于表格内，而其他的则被扔进 .

前两个选择框之后的每个选择框都是通过 JavaScript 添加的。

Answer 1

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.");
            }
        });
    });
});