将引导弹窗输入值绑定到拥有弹出窗口的元素

Question

我有一个列表及其具有弹出窗口类的TD。所以在这个时候TD点击一个按钮，会要求specifiying输入如下图所示

正如你可以看到图表按钮触发对于TD的酥料饼，并有对酥料饼2个输入。

所以我的方案是在弹出窗口中添加该输入值以将其复制到“没有基准指定标签”的div中。那么我怎么能确定哪个TD或哪个父母创建或启动了popover。更清楚当我点击保存按钮时如何确定Popover的创建者。

CODE

$('.main-attributes').popover({ 
    html: true, 
    container: 'body', 
    placement: 'auto top', 
    trigger: 'manual', 
    title: function() { 


     return $(this).find('.attribute-title').html() + " - Score Range" 
    }, 
    content: function() { 

     var H = $('#div_scoreselector'); 

     return $(H).html(); 
    } 
}) 
$('.manage-range').on('click', function (e) { //.manage-range is the chart button as shown in image which opens the popup 
    var ma = $(this).parents('.main-attributes'); 
    $('.main-attributes').not(ma).popover('hide'); 
    $(ma).popover('toggle'); 
    e.stopPropagation(); 
}); 

得分选择器DIV

<div class='hidden' id='div_scoreselector'> 
    <div> 
     <div class="row"> 
      <div class="col-md-12"> 
       <div class="row div-scorerange"> 
        <div class="col-md-6"> 
         <div class="form-group"> 
          <label class="control-label"> 
           From</label> 
          <input placeholder="Low Score" type="text" class="form-control" /> 
         </div> 
        </div> 
        <div class="col-md-6"> 
         <div class="form-group"> 
          <label class="control-label"> 
           To</label> 
          <input placeholder="High Score" type="text" class="form-control" /> 
         </div> 
        </div> 
       </div> 
       <hr /> 
       <div class="row"> 
        <div class="col-md-6 col-md-offset-6"> 
         <button class="btn-dark-grey btn"> 
          CANCEL</button> 
         <button class="btn btn-red"> 
          SAVE</button> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

假设你有与主属性类中的多个元件中的以下广义方式：

<div class="main-attributes"> 
    <span class="text-container">No Benchmarks Specified</span> 
    <button class="manage-range">Chart Button 1</button> 
</div> 
<div class="main-attributes"> 
    <span class="text-container">No Benchmarks Specified</span> 
    <button class="manage-range">Chart Button 2</button> 
</div> 
... etc. 

。在.manage范围内的点击处理程序中设置对$（this）的引用（又称在X行点击的按钮），并且一旦启动了Bootstrap弹出窗口事件，您可以将上下文作为数据值存储在Save按钮。 BS Popover docs

$('.manage-range').on('click', function (e) { 
    // ... your code here 

    var $this = $(this); 
    $('.main-attributes').off('shown.bs.popover').on('shown.bs.popover', function() { 
     $('.popover button.save').data('context', $this);   
    }); 
    e.stopPropagation(); 
}); 

外的。管理范围的点击处理程序设置一对击事件的保存按钮，如下所示：

// Assuming you have a .save class on the Save button 
$(document).on('click', '.save', function() { 
    var $context = $(this).data('context'); 
    var fromval = $('.popover #fromvalue').val(); 
    var toval = $('.popover #tovalue').val(); 
    // Now get the text container relative to the $context passed in 
    $context.siblings('.text-container').text('From: ' + fromval + ' To: ' + toval); 
}); 

下面是一个粗略的提琴：http://jsfiddle.net/9m8Yr/

Answer 2

对不起挖掘这从严重，但一个更优雅，更清洁的解决方案，恕我直言，将是..

$('.main-attributes').popover({ 
    html: true, 
    container: 'body', 
    placement: 'auto top', 
    trigger: 'manual', 
    title: 'My Popover', 
    content: function() { 

     var H = $('#div_scoreselector'); 

     return $(H).html(); 
    } 
}) 
$('.manage-range').on('click', function (e) { //.manage-range is the chart button as shown in image which opens the popup 
    $(this).prev('.text-container').attr('id', 'mainattr'); //Add an ID to the previous .text-container 
    var ma = $(this).parents('.main-attributes'); 
    $('.main-attributes').not(ma).popover('hide'); 
    $(ma).popover('toggle'); 
    e.stopPropagation(); 
}); 

$('.main-attributes').on('shown.bs.popover', function() { 
    $('.save').click(function() { 
     var fromval = $('.popover #fromvalue').val(); 
     var toval = $('.popover #tovalue').val(); 
      $('#mainattr').text('From: ' + fromval + ' To: ' + toval).removeAttr('id'); //Add the Values from Popover and then remove the ID we set. 
     $('.main-attributes').popover('hide'); 
    }); 
}); 

http://jsfiddle.net/itsabhik/cxm4rt2u/2/