jQuery:将函数绑定到模糊文本输入
jQuery: binding Function to text input on blur
我知道到目前为止已经问了很多与此相关的问题,但我可以找到 none 真正解决我的问题。
我得到的表格与上一个问题相同 -
body {
background-color: black;
}
.input-icon{
float:left;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<form class="w3-container w3-white">
<div class="w3-row-padding">
<div class="w3-col m12">
<p>
<i class="fa fa-envelope-o fa-2x fa-fw input-icon" aria-hidden="true"></i>
<input class="w3-input w3-animate-input" type="text" placeholder="E-Mail" style="width: 40%; max-width: 90% !important;">
</p>
</div>
</div>
</form>
现在想通过 jQuery 将函数绑定到我的模糊文本字段。这是新代码的样子:
function myFunction(text) {
alert(text);
}
$(document).ready(function() {
$("#input").blur(myFunction("hello"));
});
body {
background-color: black;
}
.input-icon {
float: left;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<form class="w3-container w3-white">
<div class="w3-row-padding">
<div class="w3-col m12">
<p>
<i class="fa fa-envelope-o fa-2x fa-fw input-icon" aria-hidden="true"></i>
<input class="w3-input w3-animate-input" type="text" placeholder="E-Mail" style="width: 40%; max-width: 90% !important;" id="input">
</p>
</div>
</div>
</form>
您可以很清楚地看到问题 - 它只执行一次 myFunction() 并且再也不会执行。我听说在 .bind() 中执行 myFunction() 之前设置超时会有所帮助,但这并没有真正向我解释:为什么?
一如既往地提前感谢所有答案,
- SearchingSolutions(是的,几乎每天都在搜索解决方案;))
检查此 fiddle。刚刚删除了您包含的外部 js 并将模糊功能更改为
$('#lol').on('blur',function(){
myFunction();
});
$('#lol').trigger('blur');
我知道到目前为止已经问了很多与此相关的问题,但我可以找到 none 真正解决我的问题。
我得到的表格与上一个问题相同 -
body {
background-color: black;
}
.input-icon{
float:left;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<form class="w3-container w3-white">
<div class="w3-row-padding">
<div class="w3-col m12">
<p>
<i class="fa fa-envelope-o fa-2x fa-fw input-icon" aria-hidden="true"></i>
<input class="w3-input w3-animate-input" type="text" placeholder="E-Mail" style="width: 40%; max-width: 90% !important;">
</p>
</div>
</div>
</form>
现在想通过 jQuery 将函数绑定到我的模糊文本字段。这是新代码的样子:
function myFunction(text) {
alert(text);
}
$(document).ready(function() {
$("#input").blur(myFunction("hello"));
});
body {
background-color: black;
}
.input-icon {
float: left;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<form class="w3-container w3-white">
<div class="w3-row-padding">
<div class="w3-col m12">
<p>
<i class="fa fa-envelope-o fa-2x fa-fw input-icon" aria-hidden="true"></i>
<input class="w3-input w3-animate-input" type="text" placeholder="E-Mail" style="width: 40%; max-width: 90% !important;" id="input">
</p>
</div>
</div>
</form>
您可以很清楚地看到问题 - 它只执行一次 myFunction() 并且再也不会执行。我听说在 .bind() 中执行 myFunction() 之前设置超时会有所帮助,但这并没有真正向我解释:为什么?
一如既往地提前感谢所有答案,
- SearchingSolutions(是的,几乎每天都在搜索解决方案;))
检查此 fiddle。刚刚删除了您包含的外部 js 并将模糊功能更改为
$('#lol').on('blur',function(){
myFunction();
});
$('#lol').trigger('blur');