j查询模糊事件未触发

jQuery blur event not firing

本文关键字：事件 查询 模糊      更新时间：2023-09-26

我是jQuery的新手，所以我敢打赌我做错了什么，但我无法弄清楚为什么这个事件没有触发。 我有一个文本区域元素，由于应用程序正在接受数据，因此需要在提交之前删除任何中断空格。 当文本区域失去焦点时，我正在尝试在文本区域中进行清理，因此使用模糊方法。 不幸的是，它似乎没有在我的表单中触发。 奇怪的部分是相同的代码在jsFiddle中工作，但仅在最初失去焦点时。 对文本区域的所有后续更改和焦点丢失都不会触发事件。 我还在另一个答案中读到可能需要使用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 上调用此方法时存在以下问题。 问题是我需要确保删除它们以验证字段。

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

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

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

你的代码工作得很好。

还要在提交按钮上附加单击事件，因为单击按钮时不会发生模糊事件。 您必须显式使文本区域失去焦点。

$(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/

相关文章：