jquery - 导入引导程序时Javascript不起作用
问题描述
我正在尝试将此搜索栏实现到我的网页中:https ://github.com/jeffersonRibeiro/jquery-simpleSelect 但是当我导入引导程序时它似乎不起作用。
我试图查看我是否错误地导入了东西,但似乎没有任何效果。搜索栏真正起作用的唯一时间是如果我注释掉引导导入
我正在使用的导入来自:https ://getbootstrap.com/docs/4.0/getting-started/introduction/ 。仅链接 Bootstrap 样式表似乎无法使其正常工作,我不知道为什么。有任何想法吗?
这是html文件:
$(document).ready(function(){
$('#segment').simpleSelect();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<title>Simple select with search</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> -->
<link rel="stylesheet" href="simpleSelect.css">
</head>
<body>
<form>
<select id="segment" name="segmentation">
<option data-defaultSelected>Select</option>
<option>JAVASCRIPT</option>
<option>PHP</option>
<option>BRAZIL</option>
<option>CANADA</option>
<option>MEAN</option>
</select>
<!-- <input type="submit"/> -->
</form>
Javascript:https ://github.com/jeffersonRibeiro/jquery-simpleSelect/blob/master/src/js/simpleSelect.js
CSS:https ://github.com/jeffersonRibeiro/jquery-simpleSelect/blob/master/src/css/simpleSelect.css
当我取消注释引导样式表的链接时会出现问题
解决方案
./
在 URLs 中表示当前目录。
因此更改<script src="./src/js/simpleSelect.js"></script>
以访问正确的目录。
并且要运行 jQuery 函数,它们需要被包装在 function 或 document.ready
<script>
$(document).ready(function(){
$('#segment').simpleSelect();
});
</script>
推荐阅读
- azure - 带有私有/公共 IP 和 VM 计数条件的 Azure ARM 模板
- javascript - ExpressJs 等到 MongoDB 获取数据并在输出之前循环
- powerapps - MS powerapps 构建的底层框架和编程语言是什么?
- javascript - Dynamics365 列表视图:自定义 javascript 位于何处?
- html - 如何制作自适应图像滑块?
- r - 将动作按钮与 selectinput 水平对齐
- git - github:将 master 上的最后一次提交恢复到生产环境
- c++ - qt c++ QPaint 与 QVector
- jquery - Jquery:在焦点输出上更改输入文本值
- blazor - 添加到 ValidationSummary 的消息仅显示在 ValidationSummary 中