如何在模態彈出窗口中獲取標簽的值

Question

我有以下代碼，我想要標簽中的值。

  <div class="modal fade show" id="myModal" tabindex="-1" role="dialog" aria- 
    labelledby="myModalLabel" style="display: block;">
            <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">×</span></button>
                        <h4 class="modal-title" id="myModalLabel">Ingridiants  Detail</h4>
                    </div>
                    <div class="modal-body">
                        <div id="dvDetail">&nbsp;&nbsp;<table><tbody><tr><td>Name</td>
  <td>quantity</td></tr><tr><td>Chicken&nbsp;&nbsp;</td><td>1&nbsp;&nbsp;</td><td><a class="fa fa- 
  times" id="btnRemove" title="Delete" value="Chicken"></a>&nbsp;&nbsp;</td></tr></tbody></table> 
  </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data- 
   dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

我使用以下代碼來獲取值，但值未定義。

    $('body #dvDetail').on('click', function () {
        if (confirm("Are you sure to delete this ingridients")) {
            var tr = $(this).closest('tr');
            var CartId = $(this).closest('tr').find("btnRemove").val();
            alert(CartId);
            //Deletes the record with ID sent below
            $.post(
                '/RegisterFoods/DeleteIng/',
                { FoodName: CartId },
                function (item) {
                    tr.remove();
                }, "json");

            location.reload();

        }
    });

警報未定義。 但所有其他代碼都在工作。

Answer 1

有一些錯誤。

1. Anchor <a>沒有value屬性，所以你可以使用 data attr如下
2. 你有錯誤發現它

 $('body #dvDetail').on('click', function () { var _t = $(this); if (confirm("Are you sure to delete this ingridients")) { var tr = $(this).closest('tr'); var CartId = _t.find("#btnRemove").data('value'); alert(CartId); //Deletes the record with ID sent below $.post( '/RegisterFoods/DeleteIng/', { FoodName: CartId }, function (item) { tr.remove(); }, "json"); location.reload(); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="modal fade show" id="myModal" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" style="display: block;"> <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">×</span></button> <h4 class="modal-title" id="myModalLabel">Ingridiants Detail</h4> </div> <div class="modal-body"> <div id="dvDetail">&nbsp;&nbsp;<table><tbody><tr><td>Name</td> <td>quantity</td></tr><tr><td>Chicken&nbsp;&nbsp;</td><td>1&nbsp;&nbsp;</td><td><a class="fa fa- times" id="btnRemove" title="Delete" data-value="Chicken"></a>&nbsp;&nbsp;</td></tr></tbody></table> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data- dismiss="modal">Close</button> </div> </div> </div> </div>

Answer 2

問題：你試圖找出最近的tr最接近的tr意味着如果元素找到最近的最近元素，那么它會停在那個地方。 所以你需要遍歷所有出現的tr不是你找到#btnRemove

試試下面的代碼希望它會幫助你。

 $('body #dvDetail').on('click', function() { if (confirm("Are you sure to delete this ingridients")) { var tr = $(this).find('tr #btnRemove'); var CartId = tr.attr('value'); alert(CartId); //Deletes the record with ID sent below $.post( '/RegisterFoods/DeleteIng/', { FoodName: CartId }, function(item) { tr.remove(); }, "json"); location.reload(); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="modal fade show" id="myModal" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" style="display: block;"> <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">×</span></button> <h4 class="modal-title" id="myModalLabel">Ingridiants Detail</h4> </div> <div class="modal-body"> <div id="dvDetail">&nbsp;&nbsp; <table> <tbody> <tr> <td>Name</td> <td>quantity</td> </tr> <tr> <td>Chicken&nbsp;&nbsp;</td> <td>1&nbsp;&nbsp;</td> <td> <a class="fa fa- times" id="btnRemove" title="Delete" value="Chicken"></a>&nbsp;&nbsp;</td> </tr> </tbody> </table> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data- dismiss="modal">Close</button> </div> </div> </div> </div>