每次创建弹出窗口时都不会运行Bootstrap弹出窗口单击事件代码

Question

我有一个函数，如果满足某些条件[通过来自3个不同字段（两个<input>元素和一个<selection>元素）的输入将创建并显示弹出窗口元素。我目前只显示在所有3场中都有价值，所以我可以测试酥料饼的显示/隐藏功能酥料饼，选择元件是联系在一起的酥料饼...

<select data-toggle="popover" data-trigger="manual" class="invalid-model-popover  select-group aircraft-model" style="width: 90%;"> 
    <option value="default" selected>Select a model...</option> 
</select> 

这是我用来创建popover的代码。

verifyRoute: function() { 

    $('#' + this.currentLeg.attr('id') + ' .invalid-model-popover').popover({ 
     placement: 'bottom', 
     html: true, 
     content: "<div style='display:inline-block;width:100%'><i class='glyphicon   glyphicon-remove pull-right'>" + 
       "</i></div>" + 
       "<div style='font-weight:bold'>Note:</div>" + 
       "<div>Aircraft range does not meet<br>leg requirements." + 
       "Select<br>alternate aircraft or arrange<br>fuel" + 
       " stops</div>" 

    }).click(function(event) { 
      $('#' + routeVerifier.currentLeg.attr('id') + ' .glyphicon-remove').click(function() { 
      $('#' + routeVerifier.currentLeg.attr('id') + ' .invalid-model-popover').popover('hide'); 
     }); 

    }); 

    $('#' + this.currentLeg.attr('id') + " .invalid-model-popover").popover('show'); 
}, 

所以目前当我从一组动作产生弹出窗口时，“在两个文本输入中输入一些东西，从select元素中选择一个选项，出现弹出窗口，并点击”x“，然后弹出窗口关闭。当我使用序列“从select元素中选择一个选项，在两个文本输入中输入内容”时，弹出窗口出现，但“x”的onClick未设置。如果我逐步通过代码注册事件的代码....

.click(function(event) { 
     $('#' + routeVerifier.currentLeg.attr('id') + ' .glyphicon-remove').click(function() { 
     $('#' + routeVerifier.currentLeg.attr('id') + ' .invalid-model-popover').popover('hide'); 
    }); 

}); 

甚至没有运行。这里是一个小提琴来说明问题http://jsfiddle.net/restin84/fxf9wneb/68/任何意见将不胜感激。

Answer 1

看到这个小提琴：http://jsfiddle.net/fxf9wneb/72/

问题其实是因为当你结合的“X”按钮的点击事件，它实际上是不存在的HTML文档。因此'。glyphicon-remove'选择器的长度为0.我刚刚为您的代码添加了弹出窗口显示事件，并且弹出窗口显示给用户时，我绑定了'X'按钮的单击事件。它像魅力一样工作。

var verifier = { 
 
    inputOne: null, 
 
    inputTwo: null, 
 
    selection: null, 
 

 
    init: function() { 
 
     this.inputOne = $('#input-1'); 
 
     this.inputTwo = $('#input-2'); 
 
     this.selection = $('.invalid-model-popover'); 
 
     this.inputOne.on('blur', function() { 
 
      verifier.verify(); 
 
     }); 
 
     this.inputTwo.on('blur', function() { 
 
      verifier.verify(); 
 
     }); 
 
     this.selection.on('change', function() { 
 
      verifier.verify(); 
 
     }); 
 
    }, 
 

 
    verify: function() { 
 
     var input1 = this.inputOne.val(); 
 
     var input2 = this.inputTwo.val(); 
 
     var select = verifier.selection.find("option:selected").text().trim(); 
 
     if (input1 && input2 && select !== "Select something") { 
 
      this.createPopover(); 
 
     } 
 
    }, 
 

 
    createPopover: function() { 
 
     $(' .invalid-model-popover').popover({ 
 
      placement: 'top', 
 
      html: true, 
 
      content: "<div style='display:inline-block;width:100%'><i class='glyphicon glyphicon-remove pull-right'>" + 
 
       "</i></div>" + 
 
       "<div style='font-weight:bold'>Note:</div>" + 
 
       "<div> Choose something else</div>" 
 
     }).click(function (event) { 
 
      $(' .glyphicon-remove').click(function() { 
 
       $(' .invalid-model-popover').popover('destroy'); 
 
      }); 
 
     
 
     }); 
 
     
 
     $(" .invalid-model-popover").popover('show'); 
 
     
 
     $('.invalid-model-popover').on('shown.bs.popover', function() { 
 
    $(' .glyphicon-remove').click(function() { 
 
       $(' .invalid-model-popover').popover('destroy'); 
 
      }); 
 
}); 
 
    } 
 
} 
 

 
verifier.init();

#space { 
 
    height: 300px; 
 
} 
 

 
.glyphicon-close { 
 
    cursor: pointer; 
 
}

<div id="space"></div> 
 

 
<select data-toggle="popover" data-trigger="manual" class="invalid-model-popover "> 
 
    <option value="default" selected>Select something</option> 
 
    <option>Option 2</option> 
 
    <option>Optoin 3</option> 
 
</select> 
 
<input id="input-1" placeHolder='Search' type="text" autocomplete="off" /> 
 
<input id="input-2" placeHolder='Search' type="text" autocomplete="off" />