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

Button click event not capturing right element

本文关键字：元素 单击 事件 按钮      更新时间：2023-09-26

更新问题：我问错了问题!!如何在 .each 中捕获当前元素的单击事件？我是否应该将按钮 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 -->
页面上是否有

可能有多个具有相同类或 ID 的元素？这会导致您获得错误的元素。

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

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

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

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

当您点击提交按钮时，您应该从表单中找到具有单击按钮的输入。

如果有多个具有相同类的输入，$(".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()
    };
});
相关文章：