twitter-bootstrap 如何在单击模态内的按钮时使用 jQuery 或 javascript 获取引导模态的数据值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40107269/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get data values of a bootstrap modal using jQuery or javascript on clicking button inside the modal?
提问by gauravparmar
I want to get data values of a bootstrap modal on clicking button inside the modal. Here is my modal -
我想在单击模态内的按钮时获取引导模态的数据值。这是我的模态 -
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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">Cancel</h4>
</div>
<div class="modal-body">
Are you sure you want to cancel this?
</div>
<div class="modal-footer">
<button type="button" id="savebutton" class="btn btn-success" >Yes</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
And here is the way I am passing the data to modal -
这是我将数据传递给模态的方式 -
Update -
更新 -
<button data-target='#myModal' id='link' data-toggle='modal' data-id="1" class='btn btn-danger cancel_modal' style='font-size:10px;padding:2px 5px;color:white;' >Cancel 1</button>
<button data-target='#myModal' id='link' data-toggle='modal' data-id="2" class='btn btn-danger cancel_modal' style='font-size:10px;padding:2px 5px;color:white;' >Cancel 2</button>
<button data-target='#myModal' id='link' data-toggle='modal' data-id="3" class='btn btn-danger cancel_modal' style='font-size:10px;padding:2px 5px;color:white;' >Cancel 3</button>
...
..
.
<button data-target='#myModal' id='link' data-toggle='modal' data-id="n" class='btn btn-danger cancel_modal' style='font-size:10px;padding:2px 5px;color:white;' >Cancel n</button>
Modal can be called from any one of the many buttons and I need to get the data-id of the concerned button only. e.g.- if I click on "Cancel 1" button, I should get data-id as 1 after clicking "Yes" button in modal.
可以从许多按钮中的任何一个调用模态，我只需要获取相关按钮的数据 ID。例如 - 如果我点击“取消 1”按钮，我应该在点击模式中的“是”按钮后获得数据 ID 为 1。
I want to get the modal data value of "id" field which is 1234 on clicking "Yes" button in this modal using jQuery or javascript.
我想使用jQuery或javascript在此模式中单击“是”按钮时获取“id”字段的模式数据值，该值是1234。
回答by Abdul Rehman Sayed
I have modifed your fiddle : http://jsfiddle.net/exr00e0d/
我修改了你的小提琴：http: //jsfiddle.net/exr00e0d/
you had taken href. instead of that i took the target(modal).
你已经采取了href。而不是我拿了目标（模态）。
$('.cancel_modal').click(function() {
//alert('called');
// we want to copy the 'id' from the button to the modal
var href = $(this).data('target');
var id = $(this).data('id');
// since the value of href is what we want, so I just did it like so
alert(href);
// used it as the selector for the modal
alert(id);
$(href).data('id', id);
});
回答by user1844933
try this
试试这个
function getid() {
var id=document.getElementById('savebutton').getAttribute("data-??id");
return id;
}
<button type="button" id="savebutton" class="btn btn-success" onclick="getid()" >Yes</button>
回答by Craftein
In jQuery
在 jQuery 中
$('#savebutton').click(function() {
var id = $('#link').data('id');
// if for some reason, the code above doesn't work,
// $('#link').attr('data-id');
console.log(id);
});
Edit:
编辑：
Looking at your jsfiddle
$('#link').click(function() {
// we want to copy the 'id' from the button to the modal
var target = $(this).attr('target');
var id = $(this).data('id');
$(target).data('id', id);
});
$('#savebutton').click(function() {
// now we grab it from the modal
var id = $('#addBookDialog').data('id');
console.log(id);
});
