必须双击才能从 MySQL 数据库 Bootstrap 3 选择库中获取数据

Question

我有一个应用程序，它使用 Bootstrap 3 组按钮和 Bootstrap 选择库从 MySQL 数据库获取一些数据：

<div class="panel panel-default">
  <div class="panel-heading">4 - Select Species <button type="button" class="btn btn-default btn-xs pull-right" id="specicPop">?</button></div>
  <div class="panel-body">
  <div class="btn-group"  id="speciesSelect">
      <button id="allspecies" type="button" class="btn btn-default btn-sm">All Species</button>
      <button id="aquatic" type="button" class="btn btn-default btn-sm">Aquatic</button>
      <button id="terrestria" type="button" class="btn btn-default btn-sm">Terrestrial</button>
  </div>
    <select class="selectpicker" id="selectPicker" class="form-control" data-container="body" data-live-search="true">
    <option value="0">Select From The List</option>
 </div>
</div>

ajax 如下：

$('.btn-group .btn').click(function(){
     $( ".selectpicker" ).selectpicker("refresh");
    $.post(
        'con/animalList.php',
        { selType : this.id },
        function(data)
        {
           $('#selectPicker').html(data);
        }
    );
});

PHP 部分是这样的

if ($result->num_rows > 0) 
    {
    $resultStr.=  '<option value="0">Select From The List</option><option';
        while($row = $result->fetch_assoc())
        {
            $resultStr.=  '<option value="'.$row['id'].'">'.$row['fName'].'</option>';  
        }
    }
    else
    {
        $resultStr = 'Nothing found';
    }

现在的问题是，我必须双击或单击两次才能从数据库中加载带有选项的选择元素。请注意，PHP 部分工作正常，我得到了正确的数据，但我无法弄清楚为什么第一次点击不起作用！

你能告诉我如何解决这个问题吗？ 谢谢

Answer 1

使用当前浏览器的调试器工具（在 Windows 上通常通过 F12 可见）。

然后将debugger; 添加到您的代码中以查看代码何时执行。

$('.btn-group .btn').click(function(){
    // this will pause your execution in your browser
    // and shows you the line
    debugger;
});

这样，您将看到第一次点击是否真的没有触发。 如果不是，您的代码中可能会出现错误。

您是否有其他可能破坏您的代码的 JS 代码？