如何在模式内单击按钮时使用 jQuery 或 javascript 获取引导模式的数据值？

Posted 2023-05-08

【中文标题】如何在模式内单击按钮时使用 jQuery 或 javascript 获取引导模式的数据值？

【英文标题】：How to get data values of a bootstrap modal using jQuery or javascript on clicking button inside the modal?

【发布时间】：2017-02-27 16:04:40

【问题描述】：

我想在模式内单击按钮时获取引导模式的数据值。 这是我的模态 -

<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>

这是我将数据传递给模态的方式 -

更新 -

    <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>

可以从许多按钮中的任何一个调用模态，我只需要获取相关按钮的数据 ID。例如 - 如果我点击“取消 1”按钮，在模式中点击“是”按钮后，我应该将 data-id 设为 1。

我想使用 jQuery 或 javascript 在此模式中单击“是”按钮时获取“id”字段的模式数据值为 1234。

【问题讨论】：

var id=document.getElementById('savebutton').getAttribute("data-id");

感谢您的帮助。我试过了，但它返回的是 null 而不是值。这是 jsfiddle-jsfiddle.net/Au9tc/4771

【参考方案1】：

我修改了你的小提琴： http://jsfiddle.net/exr00e0d/

你已经采取了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);
);

【参考方案2】：

试试这个

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> 

【讨论】：

感谢您的帮助。我试过了，但它返回的是 null 而不是值。这是 jsfiddle-jsfiddle.net/Au9tc/4771

@gauravparmar 你错过了 data-* 即数据属性，data-id="1234"

@gauravparmar 我现在更新了小提琴检查...jsfiddle.net/Au9tc/4777

实际上我有多个动态生成的“取消”按钮来打开模式，我想在模式内单击“是”时获取相关按钮的数据ID。如果你能帮忙的话，这里是更新的 jsfiddle - jsfiddle.net/gauravparmar/Au9tc/4812

【参考方案3】：

在 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);
);

编辑：

看着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);
);

【讨论】：

谢谢，但它不起作用。请告诉我我做错了什么？这是 jsfiddle - jsfiddle.net/Au9tc/4776

我刚刚再次查看了您的 jsfiddle，我意识到您的“加载类型”jsfiddle 选项应该是“onLoad”......即使使用我的旧代码它也应该可以工作。

对不起。我不精通 Bootstrap 模态。我尝试使用上述解决方案，但是当我有多个具有相同 id 的模态打开链接时，它对我不起作用，这就是我的情况。可能是我做错了什么。你能检查一下这个更新的 jsfiddle - jsfiddle.net/gauravparmar/Au9tc/4792

您的小提琴中不能有多个具有相同 ID 的元素。在 javascript 下拉选项中，我已将加载类型更改为“onLoad”，以便我的脚本可以运行。这是新的小提琴。 jsfiddle.net/Au9tc/4793

实际上我有多个动态生成的“取消”按钮来打开模式，我想在模式内单击“是”时获取相关按钮的数据ID。如果你能帮忙的话，这里是更新的 jsfiddle - jsfiddle.net/gauravparmar/Au9tc/4812