Question

更新问题：我问我的问题错了！如何在.each中捕获当前元素的click事件？我应该将按钮ID =分配给行的当前eq：然后找到在click事件中引用它的方法吗？

或者我应该考虑将FDID: $('.fdid-1').val()更改为：FDID: $('this.fdid-1').val()

带有按钮的动态表单元素，单击事件不捕获包含按钮的表单ul。代码将json发送到php页面进行处理。使用“文档”获取整个页面，需要深入研究元素。

$(document).on("click", ".submit", function(event){
alert($(this).text());

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

$.getJSON("modify.php",form_data,function(data){
    switch(data.retval){
        case 0: $("#status").html("Update successful!");
        break;
        case 1: $("#status").html("Unable to update!");
        break;
        default: $("#description").html("Database error, please try again.");
        break;
        }
});
});

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

        ($('<div>')
        .attr({
            'data-role': 'collapsible',
            'data-content-theme': 'c',
            'data-collapsed': 'true',
            'id': 'cResults'
        })
        .html('<h4>' + this.LastName + ', ' + this.FirstName + '</h4>'
        + '<ul data-role="listview" data-filter="true" data-filter-placeholder="Search Choices..." data-inset="true" class="makecollapsibleul">'
        + '<li><form id="productForm" action="modify.php" method="post">'
        + '<label for="fdid-1">FDID:</label>'
        + '<input type="text" name="fdid-1" 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>' 
        + 'IP: ' + this.IPADDRESS + '</li><input type="submit" class="submit" value="UPDATE" /></form><li>' 
        + 'Pick Date: ' + this.PICKDATE + '</li>'
        + '</ul>'))
        .appendTo('#primary');

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

        $('#makecollapsible').collapsibleset().trigger('create');
        $.mobile.hidePageLoadingMsg();

HTML：

 <div data-role="page" id="main">      
    <div data-role="header">         
        <h1>JSON DATA</h1>     
    </div><!-- /header -->      

    <div data-role="content">
    <div id="status"></div>
    <div id="description"></div>
    <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><!-- /content -->      

    <div data-role="footer">              
    </div>

</div><!-- /page -->

Answer 1

页面上是否有多个具有相同类或ID的元素？这会导致你得到错误的元素。

Answer 2

尝试在加载所有元素后添加此代码：

$('.submit').click(function(){
 ... 
});

提示：尽量避免将html标记混合到字符串中并从服务器添加数据，您可以使用模板引擎。（比如jquery模板......）。

Answer 3

决定使用我的ul中的帖子来处理数据 - 不知道为什么我不能直接从元素中获取它。

Answer 4

当您在提交按钮上进行clikc时，您应该从表单中找到包含所单击按钮的输入。

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

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

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

按钮单击事件不捕获正确的元素

4 个答案: