引导程序下拉按钮中无法识别javascript函数

javascript function not recognized inside bootstrap dropdown button

本文关键字：识别 javascript 函数 按钮 引导程序      更新时间：2023-09-26

我正在尝试构建一个Bootstrap按钮下拉列表，列表中的每个元素都会调用一个函数并将其id传递给它。我的js函数在一个名为Search的对象中定义，该对象在页面加载时实例化。这是我的设置。

                <div class="input-group">
                    <div class="input-group-btn" role="group">
                        <button type="button" id='filelist' class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" onclick='search.print()'>
                            List Of <span class="caret"></span></button>
                        <ul class="dropdown-menu" id='filelist_ul' role="menu" >
                          <li><a id='var1' onclick='search.print(var1)'>Var1</a></li>
                          <li><a id='var2' onclick='search.print(var2)'>Var2</a></li>
                        </ul>                            
                    </div>  
                    <input type='text' class='form-control' id='uploadtype_text' readonly>
                    <span class="input-group-btn">
                        <span class="btn btn-primary btn-file">
                            Browse&hellip; <input type="file" name='filelist'>
                        </span>
                    </span>
                    <input type="text" class="form-control" readonly>
                    <div class='input-group-btn'>
                        <input type="submit" name="uploadfile_form" value="Submit" class="btn btn-danger"/>
                        <button type='button' name='clear' class='btn btn-success' onclick='search.clearResults()'>Clear</button>
                    </div>   
                </div>

当我将search.print()附加到主"List Of"按钮时，它会被正确调用，但是，当我单击任何li元素时，我会得到错误

search.print is not a function

我以前在其他情况下也遇到过这种情况，但由于某种原因，这种情况正在崩溃，我无法理解。我好像是语法错误或者我遗漏了什么。变量搜索看起来也没有被覆盖。我不明白。

这是一把小提琴https://jsfiddle.net/rnxx4rnc/

您需要将search绑定到window对象。

$(function() {
  window.search = new Search();
});
相关文章：