jQuery扩展功能失败

如何解决jQuery扩展功能失败

我是JQuery的新手，正在绞尽脑汁试图理解为什么这段代码有效，而我的无效。这是一个片段...

  window.onbeforeunload = function(event) {
    $('#mqTable tr.group1').css("background-color","pink"); // This works
    $('#mqTable tr.group1').changeColor(); // Trying my own function fails


    // Prevent the warning message when leaving the page
    //        event.preventDefault();

    event.returnValue = "To be removed...";
  };

  jQuery.fn.extend({
    changeColor: function() {
      $(this).css("background-color","pink");
      return $(this);
    }
  });

因此，我正在尝试创建自己的自定义函数，但我做错了什么。 有什么想法吗？

解决方法

很抱歉，我不知道如何很好地使用Stack Overflow，所以这是我发现格式化代码的唯一方法。

我可以通过单击按钮来调用该函数，并且它理解为扩展的jQuery函数。但是当我尝试从onbeforeunload函数中调用它时出现错误： TypeError：firstGroup1.children（...）。changeColor不是函数

图片显示我单击了“更改颜色”按钮，并且更改了group1行的颜色...所以我知道我有一个有效的自定义jQuery函数。底部是尝试从onbeforeunload函数调用同一函数时遇到的错误。

以下是相关代码：

<script>
$( document ).ready(function($) {
    $('#changeColors').on('click',function(){
        try {
            var firstGroup1 = $('#mqTable tbody');
            firstGroup1.children("tr.group1").changeColor();
        }
        catch (err) {
            $('#errMsg').html(err);
        }
    });
});

window.onbeforeunload = function(event) {
    console.log("in onbeforeunload");
    var firstGroup1 = $('#mqTable tbody');
    try {
        firstGroup1.children("tr.group1,tr.group2").changeColor();
    } catch (err) {
        $('#errMsg').html(err);
    }

    // Prevent the warning message when leaving the page
    event.returnValue = "Oh boy";
};

jQuery.fn.extend({
    changeColor: function() {
        console.log("in changeColor");
        $(this).css("background-color","pink");
        return $(this);
    }
});