jQuery模糊事件没有触发

Question

我是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在解析回车符的s上调用此方法时存在以下问题.问题是我需要确保删除它们以验证该字段.

注意:目前,.val()在textarea元素上使用从浏览器报告的值中删除回车符.但是,当通过XHR将此值发送到服务器时,将保留回车符(或由不包含原始值的浏览器添加回车符).可以使用valHook实现此问题的解决方法,如下所示:

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

正如我之前提到的,我是jQuery的新手,并且无法找到有关如何在google和stack overflow之间正确使用valHooks的更多信息.如果有人能就我原来的问题对此有所了解,我们将不胜感激.

Answer 1

您的代码工作正常。

另外，将单击事件附加到提交按钮上，因为单击按钮时不会发生模糊事件。您必须明确地使文本区域失去焦点。

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

检查小提琴

Answer 2

@Sushanth 和 @Eez 的答案以及一些额外的研究相结合，让我找到了这个问题的正确答案。感谢您的意见，让我走上了正确的道路。我将把这个答案设置为社区维基。

将检索方法从 更改.html()为.val()以及使用该.on()功能都解决了我遇到的问题。由于表单字段"#comments"是一个textareajQuery 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/