无法解雇引导确认

时间:2016-10-03 11:29:57

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

我使用 bootstrap-confirmation 创建了以下popover确认,并希望在Dropdownlist的onClose事件中触发此确认。虽然我可以在Dropdownlist的每个关闭时获取控制台日志,但我也无法在关闭时显示确认窗口。有没有办法手动开火?

@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);
}                         

1 个答案:

答案 0 :(得分: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>
&#13;
&#13;
&#13;