Question

I am currently building a dynamic form that allows the user to add as many query strings as they would like.

In this I have to insert some logic that evaluates the selected operator from an options drop down control. If the user selects the Between value then I need to insert a second field into the current row so that there are two text input fields (aka To and From). Where I am struggling right now is on selecting elements as they are inserted in the DOM. I’m new to jQuery and I thought I understood selectors but I am still missing something.

Code I have thus far

    $(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
                });

updated based upon suggestion from Andrew

$('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>

Another wierd thing I am seeing is once I create a row the previous row seems to loose the binding to the click event. i.e. if I have three rows rows 1 and 3 will fire but row 2 will not it is as if the .live() method only works on the last row created.

Is .live the wrong method to use here? I tried using .on() but that would never trigger anything.

I’d really appreicate any insight as to how to get the select controls to properly fire and return the correct selected value as well as if there are any suggetions on the best appraoch to rebind the control to an event when being inserted into the DOM.

thank you,

Working Solution
Thanks to Andrew for getting me on the right track. The issue was related to not using unique identifiers within the DOM as well as my jQuery selector was off. Thanks to Andrews suggestions I was able to get the solution working. Below is the correct code:

$(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

The id attribute must be unique in the DOM, that is why all your calls are behaving strangely, use a unique id for each element and group like elements by adding classes, your listeners will then become,

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