Question

我有一个功能类似于x-editable

的bootstrap popover

我的想法是使用textarea获得一个popover，以编辑表格中更小的单元格。

我动态地向表添加行，它们没有id。如何使用容器选项将popover添加到调用元素。

即。 container：self（对于任何满足选择器的东西，rel =“popover”）

// add listeners for buttons in popovers
$('body').on('click', '.popover button', function() {
  if (this.id == "popover_save") {
    var text = $('.popover  #editable_popover_content_textarea').val();
    //$(this).closest('._popover_editable').find('input').val(text);
  };
  $('._popover_editable').popover('hide');
});

// add listeners to _popover_editable popovers
$("body").popover({
  toggle: 'popover',
  placement: 'right',
  title: 'Edit content',
  html: true,
  // How do I attach the popover to the calling element ._popover_editable
  // container: this,
  selector: '[rel="popover"]',
  content: function() {
    text = $(this).closest('._popover_editable').find('input').val()
    $('#editable_popover_content_textarea').text(text)
    $('._popover_editable').not(this).popover('hide');
    return $('#editable_popover_content_wrapper').html();
  },
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<td>
  <div class='_popover_editable' rel="popover">
    <input type="text" class="description form-control _table-input" value="someting" readonly></input>
  </div>
</td>
<div id="editable_popover_content_wrapper" style="display: none">
  <textarea id=editable_popover_content_textarea></textarea>
  </br>
  <button type="button" id='popover_save' class="btn btn-outline-primary btn-action _popover-save">Ok</button>
  <button type="button" id='popover_close' class="btn btn-outline-primary btn-action _popover-cancel">Cancel</button>
</div>

Answer 1

您可以在添加行时将其附加，并且可以使用element对象，或者可以为它提供一个生成的ID（如果它没有一个ID）。

bootstrap 4添加popover以触发元素容器

1 个答案: