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。

两个选择都采用相同的形式。第一个在 table 内，而其他的被扔到 .

前两个之后的每个选择框都是通过 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 回答