獲取數據屬性的值並在Bootstrap中以模式顯示

Question

我正在使用Bootstrap v.3.3.7 ，在頁面中放置了很多按鈕，可以顯示modal 。 在modal內部，我放置了一個popover按鈕。

<a href="#" id="open1" class="btn btn-primary" data-id="1" rel="popover" data-target="Message">open modal 1</a>

使用jQuery ，我獲得了data-id屬性的值，並嘗試將該值顯示為彈出文本。

  var btnid = 0;
  $('.btn-primary').click(function() {
    btnid = $(this).attr('data-id');
  });

  var textToShow = 'click ' + btnid;

  $('.stopMachine').popover({
    placement: 'right',
    html: true,
    trigger: 'toggle',
    content: textToShow
  });

但是，在所有情況下我都click 0 ...

 $(function() { $('#open1').click(function() { $('#myModal1').modal('show') }); $('#open2').click(function() { $('#myModal2').modal('show') }); var btnid = 0; $('.stopMachine').popover({ placement: 'right', html: true, trigger: 'toggle', content: function() { $('.stopMachine').click(function() { btnid = $(this).data('id'); console.log("btnid = " + btnid); }); var message = 'click ' + btnid; return message; } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> <a href="#" id="open1" class="btn btn-primary" rel="popover" data-target="Message">open modal 1</a> <a href="#" id="open2" class="btn btn-primary" rel="popover" data-message="Message">open modal 2</a> <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModal-label" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="myModal-label">Modal title</h4> </div> <div class="modal-body"> <a href="#" class="btn btn-success stopMachine" data-id="1" rel="popover" data-message="Message">info</a> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save</button> </div> </div> </div> </div> <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModal-label" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="myModal-label">Modal title</h4> </div> <div class="modal-body"> <a href="#" class="btn btn-success stopMachine" data-id="2" rel="popover" data-message="Message">info</a> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save</button> </div> </div> </div> </div> 

更新：

我將data-attribute移動到了模式鏈接中。 但是，它不會在第一次點擊中獲得值，而是在第二次點擊中獲得值！

Answer 1

您可以使用data-content屬性而不是popover屬性，可以在頁面就緒時啟動彈出窗口：

 $(function() { $('#open1').click(function() { $('#myModal1').modal('show'); $('#myModal1 .stopMachine').attr('data-content',"click "+$(this).attr('data-id')); }); $('#open2').click(function() { $('#myModal2').modal('show'); $('#myModal2 .stopMachine').attr('data-content',"click "+$(this).attr('data-id')); }); $('.stopMachine').popover({ placement: 'right', html: true, trigger: 'toggle', }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> <a href="#" id="open1" class="btn btn-primary" data-id="1" rel="popover" data-target="Message">open modal 1</a> <a href="#" id="open2" class="btn btn-primary" data-id="2" rel="popover" data-message="Message">open modal 2</a> <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModal-label" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="myModal-label">Modal title</h4> </div> <div class="modal-body"> <a href="#" class="btn btn-success stopMachine" rel="popover" data-message="Message">info</a> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save</button> </div> </div> </div> </div> <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModal-label" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="myModal-label">Modal title</h4> </div> <div class="modal-body"> <a href="#" class="btn btn-success stopMachine" rel="popover" data-message="Message">info</a> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save</button> </div> </div> </div> </div> 

對於修改后的代碼，您不需要任何點擊事件，您需要執行以下操作

 $('#open1').click(function() { $('#myModal1').modal('show') }); $('#open2').click(function() { $('#myModal2').modal('show') }); $('.stopMachine').each(function() { $(this).attr('data-content', "click " + $(this).attr('data-id')); }) $('.stopMachine').popover({ placement: 'right', html: true, trigger: 'toggle', }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> <a href="#" id="open1" class="btn btn-primary" rel="popover" data-target="Message">open modal 1</a> <a href="#" id="open2" class="btn btn-primary" rel="popover" data-message="Message">open modal 2</a> <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModal-label" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="myModal-label">Modal title</h4> </div> <div class="modal-body"> <a href="#" class="btn btn-success stopMachine" data-id="1" rel="popover" data-message="Message">info</a> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save</button> </div> </div> </div> </div> <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModal-label" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="myModal-label">Modal title</h4> </div> <div class="modal-body"> <a href="#" class="btn btn-success stopMachine" data-id="2" rel="popover" data-message="Message">info</a> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save</button> </div> </div> </div> </div> 

Answer 2

請以此替換您的jquery代碼。 希望對您有所幫助。 請看這個

var click=0;
$(function() {
  $('#open1').click(function() {
    $('#myModal1').modal('show')
  });

  $('#open2').click(function() {
    $('#myModal2').modal('show')
  });

  var btnid = 0;
  $('.btn-primary').click(function() {
    btnid = $(this).attr('data-id');
    console.log("btnid = " + btnid);
    var textToShow = 'click ' + btnid;
    if(click>0){$('.stopMachine').popover('destroy');}
    $('.stopMachine').popover({
      placement: 'right',
      html: true,
      trigger: 'toggle',
      content: textToShow
    });
    click++;
  });     
});