Question

我目前正在构建一个动态表单，允许用户添加任意数量的查询字符串。

在此我必须插入一些逻辑，用于从选项下拉控件中评估所选运算符。如果用户选择Between值，那么我需要在当前行中插入第二个字段，以便有两个文本输入字段（也就是To和From）。我现在正在努力的是选择元素，因为它们被插入到DOM中。我是jQuery的新手，我认为我理解选择器，但我仍然缺少一些东西。

我到目前为止的代码

    $(document).ready(function () {
                var index = 0;
                $('#add').click(function () {
                    InsertFields();
                });
                function InsertFields() {
                    index++;
                    $("<div id='additionalfield'><select name='condition'><option value='AND'>AND</option><option value='OR'>OR</option></select><input type='text' name='fieldname' id='fieldName' size='20' /><select name='operator'><option id='opt1' value='contains'>Contains</option><option id='opt2' value='does not contain'>Does Not Contain</option><option id='opt3' value='like'>Like</option><option id='opt4' value='between'>Between</option></select><input type='text' name='fieldValue1' id='fieldvalue1' value='" + index + "' size='20' /> <input type='button' id='newAdd' value='Add' /> <input type='button' id='btnRemove' value='Remove' /></div>").appendTo('#queryFields');
                }
    //used live on the second buttons to rebind the function once the element was added.
                    $('#newAdd').live('click', function () {
                        index++;
                    $("<div id='additionalfield'><select name='condition'><option value='AND'>AND</option><option value='OR'>OR</option></select><input type='text' name='fieldname' id='fieldName' size='20' /><select id='newOperator' name='operator'><option id='opt1' value='contains'>Contains</option><option id='opt2' value='does not contain'>Does Not Contain</option><option id='opt3' value='like'>Like</option><option id='opt4' value='between'>Between</option></select><input type='text' name='fieldValue1' id='fieldvalue1' value='" + index + "' size='20' /> <input type='button' id='newAdd' value='Add' /> <input type='button' id='btnRemove' value='Remove' /></div>").appendTo('#queryFields');
                });

                $('#btnRemove').live('click', function () {
                    $(this).parent().remove();
                });
    //first select if performed on first row works fine
                $('select[name=operator]').change(function () {
                    var foo = $('select[name=operator] option:selected').val();
                    alert(foo); //test to see if I can reach the value
                });

根据安德鲁的建议

更新

$('select').live('change', '.operClass', function () {
            var foo2 = $('.operClass option:selected').val();
            alert(foo2);
        });
            });

HTML

 <div id="queryFields">
            <select name="condition">
                <option value="AND">AND</option>
                <option value="OR">OR</option>
            </select>
            <input type="text" name="fieldname" id="fieldName" size="20" />
            <select  name="operator">
                <option id="opt1" value="CONTAINS">Contains</option>
                <option id="opt2" value="DOES NOT CONTAIN">Does Not Contain</option>
                <option id="opt3" value="LIKE">Like</option>
                <option id="opt4" value="BETWEEN">Between</option>
            </select>
            <input type="text" name="fieldValue1" id="fieldvalue1" value="" size="20" />
            <input type="button" id="add" value="Add" /> 
        </div>

我看到的另一个奇怪的事情是，一旦我创建了一行，前一行似乎松开了对click事件的绑定。即如果我有三行第1行和第3行将会触发，但第2行则不会，就好像.live（）方法仅适用于最后创建的行。

在这里使用.live是错误的方法吗？我尝试使用.on（），但是永远不会触发任何东西。

我真正了解如何让选择控件正确触发并返回正确的选定值，以及是否有最佳appraoch上的任何建议，以便在插入时将控件重新绑定到事件DOM。

谢谢，

工作解决方案 感谢Andrew让我走上正轨。问题与不使用DOM中的唯一标识符以及我的jQuery选择器关闭有关。感谢安德鲁斯的建议，我能够让解决方案正常运行。以下是正确的代码：

$(document).ready(function () {
            var index = 0;
            $('#add').click(function () {
                InsertFields();
            });
            function InsertFields() {
                index++;
                $("<div id='additionalfield'><select name='condition'><option value='AND'>AND</option><option value='OR'>OR</option></select><input type='text' name='fieldname' id='fieldName' size='20' /><select name='operator'class='operClass'><option id='opt1' value='CONTAINS'>Contains</option><option id='opt2' value='DOES NOT CONTAIN'>Does Not Contain</option><option id='opt3' value='LIKE'>Like</option><option id='opt4' value='BETWEEN'>Between</option></select><input type='text' name='fieldValue1' id='fieldvalue1' value='" + index + "' size='20' /> <input type='button' id='newAdd' value='Add' /> <input type='button' id='btnRemove' value='Remove' /></div>").appendTo('#queryFields');
            }
            $('#newAdd').live('click', function () {
                index++;
                $("<div id='additionalfield'><select name='condition'><option value='AND'>AND</option><option value='OR'>OR</option></select><input type='text' name='fieldname' id='fieldName' size='20' /><select id='newOperator' name='operator' class='operClass'><option id='opt1' value='CONTAINS'>Contains</option><option id='opt2' value='DOES NOT CONTAIN'>Does Not Contain</option><option id='opt3' value='LIKE'>Like</option><option id='opt4' value='BETWEEN'>Between</option></select><input type='text' name='fieldValue1' id='fieldvalue1' value='" + index + "' size='20' /> <input type='button' id='newAdd' value='Add' /> <input type='button' id='btnRemove' value='Remove' /></div>").appendTo('#queryFields');
            });

            $('#btnRemove').live('click', function () {
                $(this).parent().remove();
            });

            $('.operClass').change(function () {
                var foo = $('.operClass option:selected').val();
                alert(foo); //test to see if I can reach the value
            });

            $('select').live('change', '.operClass', function () {
                var foo2 = $(this, '.operClass option:selected').val();
                alert(foo2);
            });
        });

Answer 1

id属性在DOM中必须是唯一的，这就是为什么你的所有调用都表现得很奇怪，为每个元素使用一个唯一的id，并通过添加类来组合元素，然后你的听众会变成，

$(document).on('click', '.classOfElement', function(){...});

使用jQuery将对象插入DOM时设置正确的选择器

1 个答案: