【问题标题】:Cannot fire bootstrap-confirmation无法触发引导确认
【发布时间】:2017-02-11 08:03:12
【问题描述】:

我使用 bootstrap-confirmation 创建了以下弹出框确认,并希望触发下拉列表的此确认 onClose 事件。虽然我可以在每次关闭下拉列表时获取控制台日志,但我也无法在关闭时显示确认窗口。有没有手动触发的方法?

@Html.DropDownListFor(m => m.GroupId, new SelectList(Model.Groups, "Value", "Text"), 
    "Select", new { data_toggle = "confirmation" })

$('#GroupId').on('select2:close', onClose)

function onClose(evt) {
    console.log('close...'); //this line is executed

    //I think the problem is related to this part. I might be using it on the wrong section
    var Confirmation = require('confirmation-popover');
    var confirm = new Confirmation({
            rootSelector: '[data-toggle=confirmation]',
            // other options
            selector: '[data-toggle="confirmation"]',
            title: 'Are you sure?',
            placement: 'top',
            btnOkIcon: 'glyphicon glyphicon-ok',
            btnOkClass: 'btn btn-sm btn-success',
            btnOkLabel: 'Yes',
            btnCancelIcon: 'glyphicon glyphicon-remove',
            btnCancelClass: 'btn btn-sm btn-danger',
            btnCancelLabel: 'No'
        });
        confirm.show(el);
}                         

【问题讨论】:

  • $("#GroupId").on("change",function(e){ onClose(e);}) 应该可以,请尝试。
  • 问题与调用方法onClose无关,实际上问题与如何触发引导确认有关,我不知道如何正确定义它以便手动触发。有什么想法吗?
  • ethaizone.github.io/Bootstrap-Confirmation/# 什么时候触发呢?在下拉菜单中选择选项?
  • onClose函数中。

标签: javascript jquery asp.net asp.net-mvc twitter-bootstrap


【解决方案1】:

附上DEMO:希望这是你想要的。

$("select").on("change",function(){
  $('[data-toggle=confirmation]').confirmation();
});
  <link rel="stylesheet" 

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

  
<script src="http://bootstrap-confirmation.js.org/dist/bootstrap-confirmation2/bootstrap-

confirmation.min.js"></script>

<br/>
<br/>
<br/>
<br/><br/><br/><br/>

<select  class="btn btn-large btn-primary" data-toggle="confirmation"
        data-btn-ok-label="Continue" data-btn-ok-icon="glyphicon glyphicon-share-alt"
        data-btn-ok-class="btn-success"
        data-btn-cancel-label="Stoooop!" data-btn-cancel-icon="glyphicon glyphicon-ban-circle"
        data-btn-cancel-class="btn-danger"
        data-title="Is it ok?" data-content="This might be dangerous">
  <option value="volvo">Option 1</option>
  <option value="saab">Option 2</option>
  <option value="vw">Option 3</option>
  <option value="audi" selected>Option 4</option>
</select>

【讨论】:

  • 非常感谢您的回复。它非常接近我正在寻找的东西,现在唯一的问题是在确认()中使用选项参数。我试图在确认中插入选项参数(“放置”等),但没有奏效。如何在确认中使用它们?
  • 实际上现在在外面,无法访问 pc,因此无法更新演示,但您可以在更改事件的同一选择中设置数据选项之类的参数,我的意思是在更改时附加属性并获取然后检查浏览器中的元素是否打开确认弹出窗口,然后确认中的 ok 按钮在按钮中附加一个 id 和 and 选项,如果这有助于将答案标记为已接受,如果没有,我将在明天更新演示。最良好的祝愿。
  • 非常感谢您的帮助。我通过使用 $('[data-toggle="confirmation"]').confirmation({ // 选项和回调 });function onClose(evt) { $('[data-toggle="confirmation"]').confirmation('show'); } 同时。
  • 另一方面,我将您的帖子标记为答案,但如果您通过在我之前的评论中包含解决方案来编辑​​它会更好。
  • 我很感激你想出了自己的,那真的很棒!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2019-04-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多