自定義引導自定義彈出窗口不會隱藏或執行按鈕

我正在使用Bootstrap 3.3.5，我有一個自定義彈出窗口，帶有textarea和「ok」和「cancel」按鈕。單擊錨點時，彈出窗口將正確顯示，但彈出窗口中的按鈕將不會執行。如果有幫助，我也使用Kendo UI。自定義引導自定義彈出窗口不會隱藏或執行按鈕

這是我的HTML和CSS：

<a role="button" data-toggle="popover" id="memo" 
    class="btn btn-default" title="Special instructions" href="#"> 
    <span class="glyphicon glyphicon-tasks" aria-hidden="true"></span> 
    Special Instructions 
</a> 

    <style> 
     .popover-content { 
      height: 180px; 
      width: 200px; 
     } 

     textarea.popover-textarea { 
      border: 0px; 
      margin: 0px; 
      width: 100%; 
      height: 100%; 
      padding: 0px; 
      box-shadow: none; 
     } 

     .popover-footer { 
      margin: 0; 
      padding: 8px 14px; 
      font-size: 14px; 
      font-weight: 400; 
      line-height: 18px; 
      background-color: #F7F7F7; 
      border-bottom: 1px solid #EBEBEB; 
      border-radius: 5px 5px 0 0; 
     } 

    </style>

這裏是我的JavaScript：

$("#memo").popover({ 
    trigger: 'click', 
    placement: 'right', 
    html: true, 
    content: '<textarea class="popover-textarea"></textarea>', 
    template: '<div class="popover"><div class="arrow"></div>' + 
       '<h3 class="popover-title"></h3><div class="popover-content">' + 
       '</div><div class="popover-footer"><button type="button" class="btn btn-primary popover-submit">' + 
       '<span class="glyphicon glyphicon-ok" aria-hidden="true"></span></button>&nbsp;' + 
       '<button type="button" class="btn btn-default popover-cancel">' + 
       '<span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button></div></div>' 
}) 
.on('shown', function() { 

    $('#memo').not(this).popover("hide"); 
    var $this = $(this); 

    //attach the specialInstructions variable to the text 
    $('.popover-textarea #memo').val((specialInstructions == null) ? '' : specialInstructions).focus(); 

    $('.popover-textarea #memo').val("testing").focus(); 

    // close on cancel 
    $('.popover-cancel #memo').click(function() { 
     $("#memo").popover('hide'); 
    }); 

    $('.popover-submit #memo').click(function() { 
     specialInstructions = $('.popover-textarea').val(); 
     $("#memo").popover('hide'); 
    }); 
});

來源

2017-03-02 Nse

因爲你的按鈕是動態添加，嘗試像

$(document).on('click', '.popover-cancel #memo', function() { 
    $("#memo").popover('hide'); 
}); 

$(document).on('click', '.popover-submit #memo', function() { 
    specialInstructions = $('.popover-textarea').val(); 
    $("#memo").popover('hide'); 
});

，而不是

$('.popover-cancel #memo').click(function() { 
    $("#memo").popover('hide'); 
}); 

$('.popover-submit #memo').click(function() { 
    specialInstructions = $('.popover-textarea').val(); 
    $("#memo").popover('hide'); 
});

來源

2017-03-02 08:27:38 Gawel91

我想通了。

在大多數示例中，事件處理函數shown在彈出窗口對用戶可見時觸發。在檢查文檔時，最新版本的Bootstrap使用事件處理程序shown.bs.popover。一旦我改變了我的代碼中的事件處理程序，一切都按預期工作。

來源

2017-03-07 19:06:33 Nse

自定義引導自定義彈出窗口不會隱藏或執行按鈕

回答

相關問題