使用IIFE时未定义jQuery
[英]jQuery not defined when using IIFE
问题描述
I'm trying to implement a Livesearch list onto a page where it takes an array and its objects and by using the search box, will filter matches and only show match of the search term, 
我正在尝试在包含数组及其对象的页面上实现Livesearch列表，并使用搜索框过滤匹配项，仅显示搜索项的匹配项，
The issue I'm having is that when looping through the array items using a forEach and trying to append the results to the DOM, 我遇到的问题是，当使用forEach遍历数组项并尝试将结果附加到DOM时，
jQuery is Not defined
Essentially the code should grab the array, loop through the array, grab the building names and append each to the .list DIV as h4 items. 本质上，代码应获取数组，遍历数组，获取建筑物名称，并将每个名称作为h4项追加到.list DIV中。
//testItemsArray //array will contain objects used in the mockup for a livesearch function on the map pages. var testItemsArray = [{ id: '1', building: 'building1' }, { id: '2', building: 'building2' }, { id: '3', building: 'building3' }, { id: '4', building: 'building4' }, { id: '5', building: 'building5' }]; (function($) { $search = $('#searchbox'); // This is used for the filter input field var buildingList = '', buildingh4 = ''; testItemsArray.forEach(function(buildings) { buildingh4 = "<h4>" + buildings.building + "</h4>"; buildingList += buildingh4 $('.list').html(buildingList); }); }(jQuery));
<html lang="en"> <head> <script src="./js/list.js"></script> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/main.css"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Main Page</title> </head> <body> <div class="container" id="search"> <header class="header"> <h1>University Of Lincoln Map Search</h1> <h2></h2> </header> <div class="logo"> <p>This page is to be used for the locating of campus buildings and rooms</p> </div> <div class="info"> <div class="list"> ********THIS IS WHERE I WANT ALL ITEMS TO DISPLAY** ***** </div> </div> <div class="key"> <div class="key-bg"></div> <div class="key-text"><span><h2>Find the room you are looking for</h2></span></div> <hr> </div> <div class="footer"> <p>map</p> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </body> </html>
3 个解决方案
解决方案1
1 2019-02-26 12:12:39
You should place this line of code before closing the body tag. 您应该在关闭body标签之前放置这行代码。 Instead of using IIFE, use document.ready 代替使用IIFE，使用document.ready
In your code, you put your list.js before jquery.min.js , that's why you get jQuery is undefined error. 在代码中，你把你的list.js之前jquery.min.js ，这就是为什么你jQuery是undefined错误。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="./js/list.js"></script>
</body>
var testItemsArray = [{ id: '1', building: 'building1' }, { id: '2', building: 'building2' }, { id: '3', building: 'building3' }, { id: '4', building: 'building4' }, { id: '5', building: 'building5' }]; $(document).ready(function() { $search = $('#searchbox'); // This is used for the filter input field var buildingList = '', buildingh4 = ''; testItemsArray.forEach(function(buildings) { buildingh4 = "<h4>" + buildings.building + "</h4>"; buildingList += buildingh4 $('.list').html(buildingList); }); });
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/main.css"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Main Page</title> </head> <body> <div class="container" id="search"> <header class="header"> <h1>University Of Lincoln Map Search</h1> <h2></h2> </header> <div class="logo"> <p>This page is to be used for the locating of campus buildings and rooms</p> </div> <div class="info"> <div class="list"> ********THIS IS WHERE I WANT ALL ITEMS TO DISPLAY** ***** </div> </div> <div class="key"> <div class="key-bg"></div> <div class="key-text"><span><h2>Find the room you are looking for</h2></span></div> <hr> </div> <div class="footer"> <p>map</p> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="./js/list.js"></script> </body> </html>
解决方案2
0 2019-02-26 12:16:52
Put your js reference that is <!-- listJS cdn link--> <script src="./js/list.js"></script> 将您的js引用放在<!-- listJS cdn link--> <script src="./js/list.js"></script>
After Jquery library reference that is below <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 在<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>下面的Jquery库引用之后
解决方案3
-1 2019-02-26 12:12:51
You should have a reference to your Jquery library. 您应该对Jquery库有一个引用。
// IIFE - Immediately Invoked Function Expression
(function($, window, document) {
// The $ is now locally scoped
// The rest of your code goes here!
}(window.jQuery, window, document));
// The global jQuery object is passed as a parameter
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.