關閉實際彈出窗口內的Bootstrap彈出窗口？

我正在使用Twitter Bootstrap彈出式窗口來刪除特定的表格行，並且似乎無法獲得彈出窗口中的按鈕來影響任何內容。我已經在popover外面複製了確切的「取消」按鈕，它工作正常。 http://jsfiddle.net/UK7BE/1/關閉實際彈出窗口內的Bootstrap彈出窗口？

HTML

<span class="glyphicon glyphicon-trash icon-set delLtBlue delPop" title='Delete' 
      data-content=" 
      <div style='font-size: 14px; color: #000000; font-weight:bold'> 
       <span class='icon-warning-2'></span>&nbsp;Are you sure you want to delete the selected row?<br/><br/> 
      </div> 
      <input type='button' value='Cancel' class='greenBtn cancelPop' />&nbsp;<input type='button' value='Delete' class='greenBtn' id='delete' /> 
      " title="Delete"></span>&nbsp;

jQuery的

$('.delPop').popover({ 
       placement:'bottom', 
       html : true, 
      }); 
      $("input[type=button].cancelPop").on('click',function(){ 
      $(".delPop").popover('hide'); 
      });

任何想法？提前致謝。

來源

2013-10-02 triplethreat77

問題是，當您使用帶有html內容的引導彈出式窗口時，它實際上會克隆彈出窗口div內的data-content中的內容。因此，這意味着在原始取消中註冊的事件不適用於在彈出窗口中創建的新取消按鈕，因爲此data-content的內容僅屬於DOM中的屬性值而不是實數元素。因此，您可以使用事件委託將click事件綁定到文檔（因爲它位於根級別），以便將委派取消按鈕。

$(document).on('click',"input[type=button].cancelPop", function() { 
    $(".delPop").popover('hide'); 
});

fiddle

但是且慢。你不需要這樣放置popover內容。您可以改爲將html放在隱藏它們的頁面上。

更好的是：將彈出窗口的內容分隔到不同的隱藏元素，而不是將整個HTML放在屬性中。

<span class="glyphicon glyphicon-trash icon-set delLtBlue delPop" title='Delete'></span> &nbsp; 
<div class="popOverContent"> 
    <div style='font-size: 14px; color: #000000; font-weight:bold'> 
<span class='icon-warning-2'></span>&nbsp;Are you sure you want to delete the selected row? 
     <br/> 
     <br/> 
    </div> 
    <input type='button' value='Cancel' class='greenBtn cancelPop' />&nbsp; 
    <input type='button' value='Delete' class='greenBtn' id='delete' /> 
</div>

和應用：

$(function() { 
    $(document).on('click', "input[type=button].cancelPop", function() { 
     $(".delPop").popover('hide'); 
    }); 

    $('.delPop').popover({ 
     placement: 'bottom', 
     html: true, 
     content: function() { 
      return $('.popOverContent').html(); 
     } 
    }); 

});

Fiddle

來源

2013-10-02 18:04:45 PSL

太謝謝你了。非常有幫助。 – triplethreat77

@ triplethreat77不客氣。順便說一句，如果整個部分包含在另一個元素中，那麼在事件委託中，您可以綁定到該元素而不是文檔。 – PSL

關閉實際彈出窗口內的Bootstrap彈出窗口？

回答

相關問題