我找到了两篇关于新功能的精彩文章.on():jquery4u.com,elijahmanor.com.
有没有什么方法.bind()可以使用更好的.on()?
例如,我有一个示例代码如下所示:
$("#container").click( function( e ) {} )
Run Code Online (Sandbox Code Playgroud)
你可以注意到我只有一个项目由选择器检索,在我的情况下,当我的页面被加载时,<div>命名#container已经存在; 没有动态添加.重要的是要提到我使用最新版本的jQuery:1.7.2.
对于该样本,即使我不使用该功能提供的其他功能,也应该.on()使用它代替?.bind().on()
我注意到调用带有空括号的函数或根本没有任何括号时的区别.但是,我没有向函数传递任何参数,所以我想知道,有什么区别:
window.onload = initAll();
Run Code Online (Sandbox Code Playgroud)
和
window.onload = initAll;
Run Code Online (Sandbox Code Playgroud)
请解释其背后的原理.
let btn = document.createElement("button");
btn.id = "submitBV"
let firstRow = 12
let lastRow = 59
btn.addEventListener("click", autoInput(firstRow, lastRow))
function autoInput(firstRow, lastRow){
print()
}
Run Code Online (Sandbox Code Playgroud)
它告诉我Void function return value is used(截图)。
添加后return 1,它也没有解决(截图2)。
可能重复:
为什么点击事件处理程序会在页面加载后立即触发?
我对Javascript函数的理解存在差距所以我很难理解为什么我的事件处理程序在没有匿名包装器的情况下定义它会自动触发.
HTML
<a href="#" id="change-html">Change HTML</a>
Run Code Online (Sandbox Code Playgroud)
Javascript#1
var btn = $('#change-html');
btn.click(bindClick(btn)); // bindClick gets executed right away and only once
function bindClick(source){
console.log('get here');
}
Run Code Online (Sandbox Code Playgroud)
Javascript#2
var btn = $('#change-html');
btn.click(function(){
bindClick(btn); // bindClick is only executed on the anchor's click event
});
function bindClick(source){
console.log('get here');
}
Run Code Online (Sandbox Code Playgroud) 我有一个打开对话框窗口的功能.当用户单击注册按钮时,应该打开注册对话框.但是,只要页面加载,对话框就会打开.如果我使用匿名函数来处理事件它工作正常,但我想重用openDialog函数用于其他对话框(登录等),所以我不希望它是匿名的.
var ready;
ready = function () {
$('.js-join-button').on('click', openDialog(event, signUp));
function openDialog(event, dialogType) {
event.preventDefault ? event.preventDefault() : event.returnValue = false;
dialogType.dialog('open');
}
...
}
$(document).ready(ready);
Run Code Online (Sandbox Code Playgroud) document.getElementById("hit").addEventListener("click",console.log('test'))
Run Code Online (Sandbox Code Playgroud)
我有这行代码,点击的是按钮的 id :<button id = "hit" value="Hit">Hit</button>刷新页面在控制台中输出“test”,我不知道为什么。
我做了一个小页面,只有这个HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>hi</title>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<link type="text/css" href="js/jquery-ui-1.9.1.custom/css/black-tie/jquery-ui-1.9.1.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-ui-1.9.1.custom/js/jquery-ui-1.9.1.custom.js"></script>
<link type="text/css" href="css/main.css" rel="Stylesheet" />
<script src="js/main.js"></script>
<script>
$(main());
/* or $(document).ready(main()); */
</script>
</head>
<body>
<div id="loginDiv" class="popupDiv">
<div id="usernameDiv">
<label for="username">username</label>
<input type="text" id="username"/>
</div>
<div id="passwordDiv">
<label for="password">Password</label>
<input type="password" id="password"/>
</div>
</div>
<div id="introDiv">
<div class="headerDiv">
<button id="loginButton">Login</button>
</div>
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
然后我有我的main.js:
function main()
{
var $loginButton = $('#loginButton');
var $loginDiv = $('#loginDiv');
$loginDiv.dialog({ autoOpen: false …Run Code Online (Sandbox Code Playgroud) 这个主题也有类似的问题,但是他们的答案对我的问题没有帮助。
我试图使用jQuery on("click")来触发一个函数,该函数只是更改被单击的id的类。但是该函数在页面加载时被调用,然后如果您单击应该触发该函数的内容,则它将不会。
这是html:
<nav>
<ul>
<li id="all" class="tab-current"><a><span>All Departments</span></a></li>
</ul>
</nav>
Run Code Online (Sandbox Code Playgroud)
这里的js:
var $all = $("#all");
$all.on("click", function(){
tabClicked("all");
});
Run Code Online (Sandbox Code Playgroud)
我也尝试过这个:
$all.on("click", tabClicked("all"));
Run Code Online (Sandbox Code Playgroud)
这是函数:
function tabClicked(input){
//do some stuff here
}
Run Code Online (Sandbox Code Playgroud)
有任何想法吗?先谢谢了!:)
$(document).ready(function() {
$("button").on("click", TestFunction());
});
function TestFunction() {
console.log("Function called");
$b = $("#test");
$b.remove();
}
Run Code Online (Sandbox Code Playgroud)
VS
$(document).ready(function() {
$("button").on("click", function() {
$b = $("#test");
$b.remove();
});
});
Run Code Online (Sandbox Code Playgroud)
第一个在页面加载后立即删除按钮#test.无需单击按钮,只需将其删除即可.第二个按预期工作.按钮显示,在调用之前不会被删除.
我没有进行Javascript语法/ jQuery API的哪些部分?我认为传递给.on()的handler参数是一个函数.我在第一个例子中传递了一个函数,它似乎已经调用它,但它忽略了"点击".
在调用函数之前,函数内部不应忽略它吗?
简介:我想在复选框的状态更改时调用外部函数.
下面的代码,其包括功能时的变化来调用作品(代码可在的jsfiddle,注释部分)
HTML
<input type="checkbox" id="cb">
Run Code Online (Sandbox Code Playgroud)
JS
$("#cb").change(function () {
if ($("#cb").prop('checked'))
{
alert('checked');
} else {
alert('unchecked')
}
});
Run Code Online (Sandbox Code Playgroud)
正如预期的那样,alert在选中或取消选中复选框时会引发一个.
我现在想要在方法之外移动function部分.change():
$("#cb").change(alertme());
function alertme () {
if ($("#cb").prop('checked'))
{
alert('checked');
} else {
alert('unchecked')
}
}
Run Code Online (Sandbox Code Playgroud)
这不再起作用(状态变化没有警报).为什么会这样?