如何包含带有标签的jQuery插件<script>

Question

我是JavaScript/jQuery的初学者，我一直在努力让这个工作。我试图使用jQuery邮件检查插件与自述文件中提供的示例。

我将脚本附加到代码末尾的HTML文件中。

<script src="/js/mailcheck.js"></script> <!-- here is a plugin -->
<script src="/js/jquery-3.6.1.js"></script>
<script src="/js/script.js" defer></script> <!-- here is my main script -->
<script src="/js/form.js" defer></script> <!-- here is my below script -->

这是我的HTML

<nav class="formstyle">
<label for="email">e-mail
<input id="email" name="email" type="text" placeholder="[e-mail]" required>
</label>                       
<div id="suggestion"></div>
</nav>

这就是我的脚本的样子。(form.js)

$('#email').on('blur', function() {
$(this).mailcheck({
domains: domains,                       
secondLevelDomains: secondLevelDomains, 
topLevelDomains: topLevelDomains,        
suggested: function(element, suggestion) {
// callback code
$('#suggestion').html('Did you mean? ' + suggestion.full)
// console.log(suggestion)
},
empty: function(element) {
$('#suggestion').html('')
}
});
});

And i got error

form.js:59 Uncaught TypeError: $(...).mailcheck is not a function
at HTMLInputElement.<anonymous> (form.js:59:11)
at HTMLInputElement.dispatch (jquery-3.6.0.js:5430:27)
at elemData.handle (jquery-3.6.0.js:5234:28)

我做错了什么?

(我必须使用jQuery)

Answer 1

插件的<script>标签需要在jQuery的<script>标签之后。这样的:

var domains = ['gmail.com', 'aol.com'];
var secondLevelDomains = ['hotmail']
var topLevelDomains = ["com", "net", "org"];
$('#email').on('blur', function() {
$(this).mailcheck({
domains: domains,                       
secondLevelDomains: secondLevelDomains, 
topLevelDomains: topLevelDomains,        
suggested: function(element, suggestion) {
// callback code
$('#suggestion').html('Did you mean? ' + suggestion.full)
// console.log(suggestion)
},
empty: function(element) {
$('#suggestion').html('')
}
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/mailcheck@1.1.1/src/mailcheck.min.js"></script>
<nav class="formstyle">
<label for="email">e-mail
<input id="email" name="email" type="text" placeholder="[e-mail]" required>
</label>                       
<div id="suggestion"></div>
</nav>