Question

我正在使用Bootstrap 3.3.5并且我有一个带有textarea的自定义弹出框和＆＃34; ok＆＃34;和＆＃34;取消＆＃34;纽扣。单击锚点时，弹出窗口会正确显示，但弹出窗口中的按钮不会执行。如果有帮助，我也会使用Kendo UI。

这是我的HTML和CSS：

var r = _.map(json.Issues, function(v) { 
  return {
    category: v.Values[0].Value, 
    value: v.Values[2].Value,
  }
});

这是我的JavaScript：

<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>

Answer 1

因为您的按钮是动态添加的，请尝试

$(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');
});

Answer 2

我明白了。

在大多数示例中，当弹出窗口对用户可见时，会触发事件处理程序shown。在检查文档后，最新版本的Bootstrap使用事件处理程序shown.bs.popover。一旦我在代码中更改了事件处理程序，一切都按预期工作。

自定义引导程序自定义弹出窗口不会隐藏或执行按钮

2 个答案: