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上調用此方法時會出現以下問題，其中解析了回車符。 問題是我需要確保刪除它們以驗證該字段。

注意：目前，在textarea元素上使用.val()從瀏覽器報告的值中.val()回車符。 但是，當通過XHR將此值發送到服務器時，將保留回車符（或由不包含原始值的瀏覽器添加回車符）。 可以使用valHook實現此問題的解決方法，如下所示：

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

正如我之前提到的，我是jQuery的新手，並且無法找到有關如何在google和stack overflow之間正確使用valHooks的更多信息。 如果有人能就我原來的問題對此有所了解，我們將不勝感激。

Answer 1

你的代碼工作得非常好。

同時在提交按鈕上附加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));
    }
});

檢查小提琴

Answer 2

不需要將delegate（）或on（）添加到元素中，只有在動態添加，刪除等等時才需要它，但嘗試時不會受到影響。

對於您的示例，請替換：
$("#comments").blur(function() {
附：
$(document).on("blur","#comments",function() {

另外，如果它在控制台中出錯，你可以通過Chrome / firefox / safari / etc等開發者工具查看嗎？

Answer 3

你很親密 jQuery中的on（）事件可能是您可以使用的最有資源的工具之一，但幾乎沒有什么不同的方法來標記它。

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

我分叉你的jsFiddle以獲得你的工作。 http://jsfiddle.net/75JF6/33/你很親密，走在正確的軌道上。 將on（）事件視為向任何事件添加回調功能。 我希望有所幫助！

Answer 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也沒有什么不同。

Answer 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));
});
});

Answer 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));
    }

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