javascript - 在 Bootstrap Modal 中动态更新按钮 onclick

Question

我正在尝试将一个值传递到 Bootstrap Modal，然后在单击按钮时显示它，但是当我单击该按钮时没有任何显示。任何人都可以帮助解决这个问题吗？

我认为问题在于:

$(e.currentTarget).find('button[id="save"]').onclick = function() { alert(id); };

JSFiddle:http://jsfiddle.net/9m13c4rx/

HTML

<a href="#my_modal" data-toggle="modal" data-id="1">Edit</a>

<div class="modal" id="my_modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
          <h4 class="modal-title">Click Save!</h4>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button id="save" type="save" class="btn btn-primary" data-dismiss="modal">Save</button>
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

JavaScript

$('#my_modal').on('show.bs.modal', function(e) {
    var id = $(e.relatedTarget).data('id');
    $(e.currentTarget).find('button[id="save"]').onclick = function() { alert(id); };
});

Answer 1

我已经修复了你的代码

$('#my_modal').on('show.bs.modal', function(e) {
    var id = $(e.relatedTarget).data('id');
    $("#save").click(function(){
  	alert(id);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<a href="#my_modal" data-toggle="modal" data-id="1">Edit</a>

<div class="modal" id="my_modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
          <h4 class="modal-title">Click Save!</h4>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button id="save" type="save" class="btn btn-primary" data-dismiss="modal">Save</button>
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>