[英]How to get value of a tag inside modal popup
I have the following code and i want the value from a tag.我有以下代码,我想要标签中的值。
<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"> <table><tbody><tr><td>Name</td>
<td>quantity</td></tr><tr><td>Chicken </td><td>1 </td><td><a class="fa fa-
times" id="btnRemove" title="Delete" value="Chicken"></a> </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>
I have used following code to get value but value is undefined.我使用以下代码来获取值,但值未定义。
$('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();
}
});
The alert is undefined.警报未定义。 but all other code is working.
但所有其他代码都在工作。
There are some mistakes.有一些错误。
<a>
does not have value
attribute, so you can use data attr
as below <a>
没有value
属性,所以你可以使用 data attr
如下 $('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"> <table><tbody><tr><td>Name</td> <td>quantity</td></tr><tr><td>Chicken </td><td>1 </td><td><a class="fa fa- times" id="btnRemove" title="Delete" data-value="Chicken"></a> </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>
Problem: You were trying to find out closest tr
closest tr
means if element finds nearest closest element then it will stop at that place.问题:你试图找出最近的
tr
最接近的tr
意味着如果元素找到最近的最近元素,那么它会停在那个地方。 So you need to traverse all the occurrence of tr
than you find #btnRemove
所以你需要遍历所有出现的
tr
不是你找到#btnRemove
Try below code hope it will help you.试试下面的代码希望它会帮助你。
$('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"> <table> <tbody> <tr> <td>Name</td> <td>quantity</td> </tr> <tr> <td>Chicken </td> <td>1 </td> <td> <a class="fa fa- times" id="btnRemove" title="Delete" value="Chicken"></a> </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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.