文本框值来自动态ul按钮单击事件

Question

尝试从可折叠div和动态创建的listview中获取动态创建的文本框的值。每个ul都有一个按钮。当按钮单击事件触发时，我得到的是第一个ul数据，而不是来自该按钮所在的ul的数据。我的动态<form>元素很好地发布了数据，因为它与按钮位于相同的ul内。

$(document).on("click", ".submit", function(event){
//event.stopPropagation();
    var form_data = {
        FDID: $('.fdid-1').val(),
        CHOICE1: $('.choice-1').val(),
        CHOICE2: $(".choice-2").val()
        };
});

..。

$.each( data, function ( i, val ) {

        //var orders=this.aaData;
        // -----  SUB-ARRAY within DATA accessed via the orders var.      
            //$.each(val.aaData, function(property, value) {
            //var orderNum = value.LastName;
            //var itemNum = value.FirstName;

            ($('<div>')
            .attr({
                'data-role': 'collapsible',
                'data-content-theme': 'c',
                'data-collapsed': 'true',
                'id': 'cResults'
            })
            .html('<h4>' + this.LastName + ', ' + this.FirstName + '</h4>'
            + '<form class="productForm" action="modify.php" method="post">'
            + '<ul data-role="listview" data-filter="true" data-filter-placeholder="Search Choices..." data-inset="true" class="makecollapsibleul">'
            + '<li>'
            + '<label for="fdid-1">FDID:</label>'
            + '<input type="text" name="fdid-10" class="fdid-1" value=' + this.FDID + '>'
            + '</li><li>' 
            + '<label for="text-1">Choice 1:</label>'
            + '<input type="text" name="choice-1" class="choice-1" value=' + this.C1 + '>'
            + '</li><li>' 
            + '<label for="text-2">Choice 2:</label>'
            + '<input type="text" name="choice-2" class="choice-2" value=' + this.C2 + '>'
            + '</li><li>' 
            + 'Choice 2: ' + this.C2 + '</li><li>' 
            + 'Choice 3: ' + this.C3 + '</li><li>' 
            + 'Choice 4: ' + this.C4 + '</li><li>' 
            + 'Choice 5: ' + this.C5 + '</li><li>' 
            + 'Choice 6: ' + this.C6 + '</li><li>' 
            + 'IP: ' + this.IPADDRESS + '</li><input type="submit" class="submit" value="UPDATE" /><li>' 
            + 'Pick Date: ' + this.PICKDATE + '</li>'
            + '</ul></form>'))
            .appendTo('#primary');

                    //$(".title").append('<li>'+orderNum+' -- '+itemNum+'</li>');

            $('#makecollapsible').collapsibleset().trigger('create');
            $.mobile.hidePageLoadingMsg();
                    //});     // end of sub-array
    });
    }); 

HTML：

<div data-role="content">
    <ul data-role="listview" id="outer-ul">
        <li>  
        <div data-role="collapsible">
            <h4>Submitted Choices</h4> 

            <ul data-role="listview" data-inset="true" data-filter="true" id="makecollapsible">
                <!-- AJAX CONTENT -->
            </ul>

        </div>
        </li>
    </ul>           
    </div>     

Answer 1

如果具有相同类的多个输入，$(".myClass").val()将返回第一个元素值。

因此，解决方案是获取表单并在表单中找到输入：

$(document).on("click", ".submit", function(event){
    var $form = $(this).closest("form");

    var form_data = {
        FDID: $('.fdid-1', $form).val(),
        CHOICE1: $('.choice-1', $form).val(),
        CHOICE2: $(".choice-2", $form).val()
    };
});