如何知道在模式上按下关闭按钮时哪个按钮触发了模式答案

【问题标题】：How to know which button triggered the modal on pressing close button on modal如何知道在模式上按下关闭按钮时哪个按钮触发了模式
【发布时间】：2018-10-06 17:31:55
【问题描述】：

<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Edit</button>

<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Edit</button>      <div class="modal fade" id="myModal" role="dialog">

    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" onclick="saveHTML(this)" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>

function saveHTML() {
    //code

}

我有模态 html，并且我有几个按钮，所有这些都可以触发按钮，因为设置了 data-target 和 data-toggle 属性。但是在单击模态内的关闭按钮时，我如何确定哪个按钮触发了模态。触发模式的按钮没有唯一的 id，因为我必须使代码动态。所以必须使用'this'运算符。

【问题讨论】：

不要内联附加 JS 处理程序；将呈现与内容分开。改为使用适当的 Javascript 附加它们，然后检查 event.target 以识别源元素。
同一个页面有很多模态框吗？
不，只有一个。但是许多按钮可以触发模态但它们不能有唯一的 id 或类

标签： javascript jquery

【解决方案1】：

简单的解决方案1：您可以添加自定义类以知道单击了哪个按钮，此解决方案将在按钮本身上添加该类，然后您可以识别它

$(document).ready(function(){
    $("button").click(function(){
        $(this).addClass("pressed");
    });
});

简单的解决方案2：点击按钮立即附加功能

$(document).ready(function(){
    $("button").click(function(){
        function .....//logic
    });
});

我也有很多解决方案，但为此我需要看看你想要这个的目的是什么。

【讨论】：

【解决方案2】：

使用js打开modal并存储目标元素。您可以打开以下链接进行测试。

https://jsbin.com/nejukidopi/1/edit?html,js,output

$(document).ready(function(){
 
  var currentBtn;
  
  $('.my-edit-btn').on('click', function(event){
    currentBtn = event.target;
    $('#myModal').modal('show');
  });
  
  window.saveHTML = function(){
    alert($(currentBtn).text());
  }

});

<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><!-- Latest compiled and minified CSS -->
<body>
   <button type="button" class="btn btn-success my-edit-btn">Edit 1</button>
   <button type="button" class="btn btn-success my-edit-btn">Edit 2</button>      
   <div class="modal fade" id="myModal" role="dialog">
      <div class="modal-dialog">
         <!-- Modal content-->
         <div class="modal-content">
            <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal">&times;</button>
               <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
               <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-default" onclick="saveHTML()" data-dismiss="modal">Save</button>
            </div>
         </div>
      </div>
   </div>
</body>

【讨论】：

【解决方案3】：

为按钮添加监听器，以便您确定哪个按钮显示为关闭模式

就我而言：

按钮：

<button class="close" id="close_modal_button" data-dismiss="modal">Close</button>

听众：

$('#close_modal_button').on('click', function(){
$(event).val(String(event.dataset['value']));
});

【讨论】：