JQuery：第二次点击按钮时无法获取“td”的值

Posted 2023-02-24

【中文标题】JQuery：第二次点击按钮时无法获取“td”的值

【英文标题】：JQuery:Not able to fetch value of "td" when onclick on button happens second time

【发布时间】：2018-04-27 01:57:09

【问题描述】：

以下是我的表格的代码。在操作列中，我有一个名为接受和拒绝的按钮。单击拒绝时，我想获取该“tr”中存在的 2 和 3“td”的值。

<table class="w3-table" id="tbl_task" >
<tr>
    % for ele in d|slice:":1" % % for key in ele.keys %
    <th> key </th>
    % endfor % % endfor %
    <th>Action</th>
</tr>
% for ele in d %
<tr class="class_1">
    % for k, v in ele.iteritems % % if k in "Assigned_Users" %
    <td>
        % if v|length > 2 %
        <div style="width: 80%;max-height: 37px;overflow:auto;margin-left: 32px;">
            % for ch in v %  ch|linebreaksbr  % endfor %
        </div>
        % else % % for ch in v %  ch  % endfor % % endif %
    </td>
    % else %
    <td>
         v 
    </td>
    % endif % % endfor %
    <td class="noexcel">
        <div id="td_button_div">
            <button id="status_accepted" class="btn btn-default btn-sm" name="accept">
                <span class="glyphicon glyphicon-ok"></span> Approve
            </button>
            <button id="status_rejected" class="btn btn-default btn-sm" name="reject" data-toggle="modal" data-target="#myModal">
                <span class="glyphicon glyphicon-remove"></span> Reject
            </button>
            <!-- Modal -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <h4 class="modal-title" id="myModalLabel">Modal title
                            </h4>
                        </div>
                        <div class="modal-body">
                            <label>Remarks</label>
                            <textarea name="textarea" style="color:black;width:100%"></textarea>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close
                            </button>
                            <button type="button" class="btn btn-primary" id="save_remarks">Save changes
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </td>
</tr>
% endfor %

第一次我正确获取数据，但在第二次点击时，仅显示模式和现有值。

以下是我的 JQuery 代码：

$('#status_rejected').on('click', function(e)

        var current_row = ' ';
        var task_name = ' ';
        var current_status = ' ';
        var notes = ' ';

        alert("inside reject function");

        current_row = $(this).closest('tr');

        task_name = current_row.find("td:eq(2)").text();

        current_status = current_row.find("td:eq(0)").text();

        alert("cstatus--->"+$.trim(current_status)+"\n"+"tname"+$.trim(task_name));
        var status = "reject"

        $("textarea").val(" ");

        $("#save_remarks").on('click',function()
            alert("inside save changes on click");

            notes = $.trim($("textarea").val());
            alert("cstatus"+$.trim(current_status)+"\n"+"tname"+$.trim(task_name));


        );
);// end of show model

需要帮助吗？

【问题讨论】：

你的意思是如果用户点击了那个按钮然后他刷新了你想要禁止他再次点击按钮的页面？

嘿，你能把生成的html放在这里吗？只需在您的网络浏览器中查看源代码，然后将其复制并粘贴到答案中。我看到的一个问题是您正在使用 id。网页上的一个元素应该只有一个 id，而应使用 status_rejected 类。

@nfnneil 我试过了，但是没用

试过哪一个？获取源代码或将 id 切换为类？

@nfnneil 我正在获取值，但我面临的问题是当我第一次选择拒绝按钮时，我正确地从“状态”和“任务”中获取值。但在第二次我得到了以前的以及新选择的值。

【参考方案1】：

我可以通过以下方式解决这个问题：

$('.noexcel #status_rejected').on('click', function(e)

            var current_row = ' ';
            var task_name = ' ';
            var current_status = ' ';
            var notes = ' ';
            var cnt = 0;

            current_row = $(this).closest('tr');

            task_name = current_row.find("td:eq(2)").text();

            current_status = current_row.find("td:eq(0)").text();

            var status = "reject"

            $("textarea").val(" ");

            $("#save_remarks").on('click',function()

                notes = $.trim($("textarea").val());

                if(current_status != ' ' && task_name != ' ' && notes != ' ' && current_row != ' ')
                    ajax_call(current_row, current_status, task_name, notes, status);
                    current_row = current_status = task_name = notes = ' ';
                
            ); // end of onclick of modal save button
    );// end of show model

function ajax_call(current_row, current_status, task_name, notes, status)
    $.ajax(
            type:'post',
            url:'/ajax/change_ftrack_status/',
            data:
                currentStatus : current_status,
                taskName : task_name,
                status : status,
                notes : notes
            ,
            success:function(data)
                $.each(data, function(key, value)
                if (key == "ftrack_status")
                    current_row.find("td:eq(0)").html(value);
                
                else if (key == "updated_on")
                    current_row.find("td:eq(1)").html(value);
                
            ); // end of for each
            // disable the reject button
            current_row.find("td #status_rejected").prop("disabled", true);
            
           ); //end of ajax