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

按钮单击事件中动态ul的文本框值

1 个答案: