jQuery模糊事件不会触发 [英] jQuery blur event not firing

问题描述

我是jQuery的新手，所以我敢打赌我做错了什么，但我无法弄清楚为什么这个事件没有被解雇。由于接受数据的应用程序，我有一个textarea元素需要在提交之前删除任何中断空间。我正试图在textarea清理掉它的焦点，因此模糊方法。不幸的是，它似乎并没有在我的表格中触发。奇怪的部分是相同的代码在jsFiddle中工作，但只在最初失去焦点时才起作用。对textarea的所有后续更改和焦点丢失都不会触发该事件。我也读过另一个答案，可能需要使用委托（）或 .on（）方法，但我不是100％确定如何做到这一点。（ jQuery blur（）不工作？）代码如下，任何建议都会有帮助。

 < script type =text / javascriptsrc =http ：//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js>< /脚本> 
 
< script type =text / javascript> 
 $（document）.ready（function（）{
 $（＃comments）。blur（function（）{
 var txt = $（＃comments）。html ）; 
 txt = txt.replace（/ \\\ / g，''）; 
 txt = txt.replace（/ \s {3，} / g，''）; 
 $（＃comments）。html（$。trim（txt））; 
}）; 
 
 //$(\"#comments\").trigger(\"blur ）;增加了这个来帮助解决这个问题，但它并没有改变
}）; 
< / script> 
  

HTML：

< textarea name =评论id =commentsstyle =width：100％; height：200px>< / textarea>

是jsFiddle链接： http://jsfiddle.net/75JF6/17/

编辑：感谢所有快速回复。我已经看过每个人的答案，并采取了你的建议。我在那里的95％，但是，仍然存在一个问题仍然存在。切换到 .val（）方法而不是 .html（）是更好的方法，但根据在jQuery API中，当在 textarea s上调用此方法时，存在以下问题，其中回车符被解析出。问题是我需要确保它们被移除以验证该字段。

注意：目前，使用 .val（）在textarea元素上剥离来自浏览器报告值的回车符。然而，当这个值通过XHR被发送到服务器时，回车被保留下来（或者被不包含在原始值中的浏览器添加）。这个问题的解决方法可以通过使用valHook来实现，如下所示：

  $。valHooks。 textarea = {
 get：function（elem）{
 return elem.value.replace（/ \r？\\\
 / g，\r\\\
）; 
} 
}; 
  

正如我前面提到的，我是jQuery的新手，无法找到有关如何正确使用谷歌和谷歌之间的valHooks堆栈溢出。如果有人可以在这个问题上解释一下我的原始问题，那将不胜感激。

解决方案

@Sushanth - 和@Eez以及一些额外的研究让我对这个问题得到了正确的答案。感谢您的意见，这使我走上了正确的道路。我将把这个答案设置为社区维基。
$ b 将检索方法从 .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？\\\
 / g，< br> \\\
 ）; 
} 
}; 
 
 
 $（＃comments）。（'blur'，trimText）; 
 $（input （'click'，function（e）{
 e.preventDefault（）; 
 trimText（）; 
 $（form：first ）.submit（）; 
））; 
 
函数trimText（）{
 var txt = $（＃comments）。val（）; 
 txt = txt.replace（/< br> \\\
 / g，''）; 
 txt = txt.replace（/ \s {3，} / g，''）; 
 / / alert（txt）; 
 $（＃comments）.val（$。trim（txt））; 
} 
 
 
}）; 
  

我分叉@Sushanth--如果有人感兴趣，jsFiddle再次包含所有这些信息： http://jsfiddle.net/B3y4T/

I'm new to jQuery, so I bet I'm doing something wrong, but I cannot figure out why this event is not firing. I have a textarea element that needs to have any breaking spaces removed prior to submission due to the application that is accepting the data. I am attempting to do this clean up in the textarea when it loses focus, hence the blur method. Unfortunately it does not appear to fire within my form. The weird part is the same code works in jsFiddle, but only upon the initial loss of focus. All subsequent changes to the textarea and loss of focus does not fire the event. I also read in another answer that the delegate() or .on() methods might need to be used, but I'm not 100% sure how to do this properly.(jQuery blur() not working?) Code is below, any advice would be helpful.

<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>

And here is the jsFiddle link: http://jsfiddle.net/75JF6/17/

EDIT: Thanks for all the fast responses. I have looked into everyone's answers and taken your advice. I'm 95% of the way there, however, there is still an issue that persists. Switching to the .val() method instead of .html() is a better way of doing this, but according to the jQuery API the following issue exists when calling this method on textareas where carriage returns are parsed out. The issue is that I need to make sure they are removed to validate the field.

Note: At present, using .val() on textarea elements strips carriage return characters from the browser-reported value. When this value is sent to the server via XHR however, carriage returns are preserved (or added by browsers which do not include them in the raw value). A workaround for this issue can be achieved using a valHook as follows:

$.valHooks.textarea = {
  get: function( elem ) {
  return elem.value.replace( /\r?\n/g, "\r\n" );
  }
};

As I mentioned earlier I'm new to jQuery and could not find much information regarding how to properly use valHooks between google & stack overflow. If anyone can shed some light on this in relation to my original question it would be greatly appreciated.

解决方案

A combination of answers from @Sushanth -- and @Eez along with some additional research brought me to the correct answer to this question. Thank you for your input, which put me on the right path. I'm going to set this answer as community wiki.

Both changing the retrieval method from .html() to .val() as well as using the .on() function solved the issue I was experiencing. Since the form field "#comments" was a textarea it experienced a known issue within the jQuery API: http://api.jquery.com/val/

Below is the code that actually resolved the issue:

$(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));
  }


});

I forked @Sushanth-- 's jsFiddle again to include all of this information if anyone is interested: http://jsfiddle.net/B3y4T/

这篇关于jQuery模糊事件不会触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！