0

我有一个应用程序，它使用 Bootstrap 3 Group Button 和 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 部分工作正常，我得到了正确的数据，但我无法弄清楚为什么第一次点击不起作用！

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

4

1 回答 1

0

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

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

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

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

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

于 2014-05-22T22:55:07.357 回答