Question

我在“表格”视图上有多个弹出窗口。单击2次后，它才会打开。

$(document).on('click','.reason_pop',function(e){
        var id = $(this).attr('data-val');

        setTimeout(function(){
          $('#reason_'+id).focus();
        },300);

        $("#reason_popover_"+id).popover({
            content: '<div class="row pop" ><div class="col-12"><h5 class="float-right popover_close" data-attr="'+id+'" id="close_pop_'+id+'"><span class="mb-0">&times;</span></h5></div></div><div class="group"><span class="input_icon"></span><input type="text" value="Answer" class="pop input_field" data-attr="'+id+'"  name="reason" id="reason_'+id+'" required><span class="highlight"></span><label class="label_name">Reason *</label></div><div class="row"><div class="col-md-12"></div></div>',
            html: true
        }); 

 });

Answer 1

尝试使用popover('toggle')和sanitize: false

$(document).on('click', '.reason_pop', function(e) {
  var id = $(this).attr('data-val');

  $("#reason_popover_" + id).popover({
    content: '<div class="row pop" ><div class="col-12"><h5 class="float-right popover_close" data-attr="' + id + '" id="close_pop_' + id + '"><span class="mb-0">&times;</span></h5></div></div><div class="group"><span class="input_icon"></span><input type="text" value="Answer" class="pop input_field" data-attr="' + id + '"  name="reason" id="reason_' + id + '" required><span class="highlight"></span><label class="label_name">Reason *</label></div><div class="row"><div class="col-md-12"></div></div>',
    html: true,
    sanitize: false
  }).popover('toggle')

});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<div id="reason_popover_1" class="pb-5 mb-5">popover</div>

<button class="reason_pop" data-val="1">pop</button>

Bootstrap弹出式窗口需要点击两次才能打开弹出式窗口

1 个答案: