jQuery模糊事件未触发答案

【问题标题】：jQuery blur event not firingjQuery模糊事件未触发
【发布时间】：2013-09-09 17:10:29
【问题描述】：

我是 jQuery 新手，所以我敢打赌我做错了什么，但我不知道为什么这个事件没有触发。由于正在接受数据的应用程序，我有一个 textarea 元素需要在提交之前删除任何中断空格。当它失去焦点时，我试图在文本区域中进行清理，因此使用模糊方法。不幸的是，它似乎没有在我的表单中触发。奇怪的部分是相同的代码在 jsFiddle 中工作，但只是在最初失去焦点时。对 textarea 的所有后续更改和失去焦点都不会触发该事件。我还在另一个答案中读到可能需要使用 delegate() 或 .on() 方法，但我不能 100% 确定如何正确执行此操作。（jQuery blur() not working?）代码如下，任何建议都会有所帮助.

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

注意：目前，在 textarea 元素上使用 .val() 会从浏览器报告的值中去除回车符。然而，当这个值通过 XHR 发送到服务器时，会保留回车（或由不包含在原始值中的浏览器添加）。可以使用 valHook 来解决此问题，如下所示：

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

正如我之前提到的，我是 jQuery 新手，找不到太多关于如何在 google 和堆栈溢出之间正确使用 valHooks 的信息。如果有人能就我最初的问题对此有所了解，将不胜感激。

【问题讨论】：

事件正在触发，但您的正则表达式错误。
jsfiddle.net/75JF6/24 完美运行。
以后，请确保在您的事件中使用 alert('some message') 或 console.log('some message') 以确保它正在触发。当您的问题与正则表达式有关时，这可以避免您错误地询问有关事件的问题。
我在下面对某人的回答添加了评论，它在 IE10 中不起作用

标签： javascript jquery html forms textarea

【解决方案1】：

您的代码运行良好。

还要在提交按钮上附加单击事件，因为单击按钮时不会发生模糊事件。你必须明确地让 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));
    }
});

Check Fiddle

【讨论】：

嗯...他的代码和提供的代码都不能在 IE10 中运行。去图吧。
@KennyThompson .. 我相信这是因为prevent**d**efault .. d 应该是大写的。谢谢指出
您的答案和切换到.val() 而不是.html() 的建议在与valHook 函数混合时起到了作用，因为我使用的是textareas

【解决方案2】：

delegate() 或 on() 不需要添加到元素中，只有动态添加、删除等情况下才需要，但尝试一下也无妨。

对于您的示例，请替换：
$("#comments").blur(function() {
与：
$(document).on("blur","#comments",function() {

另外，你可以通过 chrome/firefox/safari/etc 的开发者工具检查控制台是否出现错误？

【讨论】：

向你致敬，在将文档就绪函数中的 $(element).on('blur') 事件处理程序替换为 $(document).on("blur",element ) 功能，即使我找不到它们之间的任何区别
@KishoreInWindows 通过这种方式，您可以告诉父级（文档、正文、头部等）使用给定的选择器侦听子事件，而不是直接将它们绑定在选择器上（可能不存在，然后事件不存在）运行）。
@mwebber 如果元素是动态的，您可以使用上述过程，否则您可以直接绑定

【解决方案3】：

你很亲密。 jQuery 中的 on() 事件可能是您可以使用的资源最多的工具之一，但标记它的方法很少。

$("#comments").on({
    'blur' : function() {
        // your magic here
    }
});
$("#comments").trigger("blur");

我分叉了你的 jsFiddle 以获得你的工作。 http://jsfiddle.net/75JF6/33/你很接近并且在正确的轨道上。将 on() 事件视为向任何事件添加回调功能。希望对您有所帮助！

【讨论】：

【解决方案4】：

正确方法：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 也不例外。

【讨论】：

【解决方案5】：

它适用于 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));
});
});

【讨论】：

【解决方案6】：

仅当您在 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));
    }

【讨论】：

【解决方案7】：

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

【讨论】：