时间戳

首页 > 解决方案 > bootstrap 4 将弹出框添加到触发元素容器

jquery - bootstrap 4 将弹出框添加到触发元素容器

问题描述

我有一个引导弹出窗口，其功能类似于x-editable

这个想法是获得一个带有 textarea 的弹出框，以编辑表格中的一个小得多的单元格。

我将行动态添加到表中，并且它们没有 ID。如何使用容器选项将弹出框添加到调用元素。

即容器：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>

标签： jquerybootstrap-4

解决方案

您可以在添加行时附加它，并使用元素对象，或者如果它没有，您可以给它一个生成的 id。

推荐阅读