[英]jQuery blur event not firing
我是jQuery的新手,所以我打赌我做错了什么,但我无法弄清楚为什么这个事件没有解雇。 我有一个textarea元素,由于应用程序接受数据,因此在提交之前需要删除任何空格。 当它失去焦点时,我试图在textarea中清理它,因此模糊方法。 不幸的是,它似乎并没有在我的表格中触发。 奇怪的部分是相同的代码在jsFiddle中工作,但仅在最初失去焦点时。 对textarea的所有后续更改和失去焦点都不会触发事件。 我还读到了另一个答案,可能需要使用delegate()
或.on()
方法,但我不能100%确定如何正确地执行此操作。( jQuery blur()不起作用? )代码如下,任何意见将是有益的。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#comments").blur(function() {
var txt = $("#comments").html();
txt = txt.replace(/\n/g, ' ');
txt = txt.replace(/\s{3,}/g, ' ');
$("#comments").html($.trim(txt));
});
//$("#comments").trigger("blur"); added this to help fix the issue, but it didn't make a difference
});
</script>
HTML:
<textarea name="comments" id="comments" style="width: 100%; height:200px"></textarea>
这里是jsFiddle链接: http : //jsfiddle.net/75JF6/17/
编辑:感谢所有快速回复。 我已经调查了每个人的答案,并听取了你的意见。 我有95%的路在那里,然而,仍然存在一个问题。 切换到.val()
方法而不是.html()
是一种更好的方法,但是根据jQuery API,在textarea
上调用此方法时会出现以下问题,其中解析了回车符。 问题是我需要确保删除它们以验证该字段。
注意:目前,在textarea元素上使用
.val()
从浏览器报告的值中.val()
回车符。 但是,当通过XHR将此值发送到服务器时,将保留回车符(或由不包含原始值的浏览器添加回车符)。 可以使用valHook实现此问题的解决方法,如下所示:
$.valHooks.textarea = {
get: function( elem ) {
return elem.value.replace( /\r?\n/g, "\r\n" );
}
};
正如我之前提到的,我是jQuery的新手,并且无法找到有关如何在google和stack overflow之间正确使用valHooks的更多信息。 如果有人能就我原来的问题对此有所了解,我们将不胜感激。
你的代码工作得非常好。
同时在提交按钮上附加click事件,因为单击按钮时不会发生模糊事件。 你必须明确地让textarea失去焦点。
$(document).ready(function () {
$("#comments").on('blur', trimText);
$("input[type='submit']").on('click', function (e) {
e.preventDefault();
trimText();
$("input[type='submit']").submit();
});
function trimText() {
var txt = $("#comments").html();
txt = txt.replace(/\n/g, ' ');
txt = txt.replace(/\s{3,}/g, ' ');
$("#comments").html($.trim(txt));
}
});
不需要将delegate()或on()添加到元素中,只有在动态添加,删除等等时才需要它,但尝试时不会受到影响。
对于您的示例,请替换:
$("#comments").blur(function() {
附:
$(document).on("blur","#comments",function() {
另外,如果它在控制台中出错,你可以通过Chrome / firefox / safari / etc等开发者工具查看吗?
你很亲密 jQuery中的on()事件可能是您可以使用的最有资源的工具之一,但几乎没有什么不同的方法来标记它。
$("#comments").on({
'blur' : function() {
// your magic here
}
});
$("#comments").trigger("blur");
我分叉你的jsFiddle以获得你的工作。 http://jsfiddle.net/75JF6/33/你很亲密,走在正确的轨道上。 将on()事件视为向任何事件添加回调功能。 我希望有所帮助!
正确方法: http : //jsfiddle.net/75JF6/35/
$(document).ready(function() {
$("textarea#comments").on('blur',function() {
var txt = $(this).val();
txt.replace(/\n/g, ' ');
txt = txt.replace(/\s{3,}/g, ' ');
$(this).val($.trim(txt));
});
});
val()应该用于表单输入元素,textarea也没有什么不同。
它适用于val()
而不是html()
我认为这是因为html值不会更新DOM树的实际内容
$(document).ready(function() {
$("#comments").blur(function() {
var txt = $("#comments").val();
txt = txt.replace(/\n/g, ' ');
txt = txt.replace(/\s{3,}/g, ' ');
$("#comments").val($.trim(txt));
});
});
仅在DOM准备好后附加目标元素时使用On,delegate或Live。
你可以使用keyup来做同样的事情,除了它在每次击键时都会触发。 当用户在键入后等待300毫秒时,将触发以下代码。 它会比模糊事件更快。
var ClearInterValHandel;
var interval = 300 //in milisecond.
$("#comments").keyup(function(){
ClearTimeOut(ClearInterValHandel);
ClearInterValHandel = SetTimeout(trimText, interval);
});
function trimText() {
var txt = $("#comments").html();
txt = txt.replace(/\n/g, ' ');
txt = txt.replace(/\s{3,}/g, ' ');
$("#comments").html($.trim(txt));
}
@Sushanth和@Eez的答案以及一些额外的研究结合起来,使我得到了这个问题的正确答案。 感谢您的投入,这使我走上了正确的道路。 我将把这个答案设置为社区维基。
将检索方法从.html()
更改为.val()
以及使用.on()
函数都解决了我遇到的问题。 由于表单字段"#comments"
是一个textarea
它在jQuery API中遇到了一个已知问题: http : //api.jquery.com/val/
以下是实际解决问题的代码:
$(document).ready(function () {
$.valHooks.textarea = {
get: function (elem) {
return elem.value.replace(/\r?\n/g, "<br>\n");
}
};
$("#comments").on('blur', trimText);
$("input[type='submit']").on('click', function (e) {
e.preventDefault();
trimText();
$("form:first").submit();
});
function trimText() {
var txt = $("#comments").val();
txt = txt.replace(/<br>\n/g, ' ');
txt = txt.replace(/\s{3,}/g, ' ');
//alert(txt);
$("#comments").val($.trim(txt));
}
});
如果有人有兴趣,我再次分享@ Sushanth--的jsFiddle以包含所有这些信息: http : //jsfiddle.net/B3y4T/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.