在 jQuery 中调用用户定义的函数答案

【问题标题】：Calling a user defined function in jQuery在 jQuery 中调用用户定义的函数
【发布时间】：2011-01-31 23:41:25
【问题描述】：

我正在尝试在 jQuery 中调用用户定义的函数：

$(document).ready(function() {
  $('#btnSun').click(function() {
    myFunction();
  });
  $.fn.myFunction = function() {
    alert('hi');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnSun">Say hello!</button>

我也尝试了以下方法：

$(document).ready(function() {
  $('#btnSun').click(function() {
    myFunction();
  });
});

function myFunction() {
  alert('hi');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnSun">Say hello!</button>

它似乎不起作用！知道我哪里错了吗？

【问题讨论】：

我会把它定义为一个插件
只是一个注释，因为您使用的是 $.fn.myFunction，在大多数情况下，您会告诉您要在有效的包装 jquery 对象上使用此函数，例如。 $('your_html_tag').myFunction()。 jsfiddle.net/H7z8f

标签： jquery function function-calls user-defined

【解决方案1】：

如果你想通过 jQuery 事件调用一个普通的函数，你可以这样做：

$(document).ready(function() {
  $('#btnSun').click(myFunction);
});

function myFunction() {
  alert('hi');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnSun">Say hello!</button>

【讨论】：

如果你需要一个对象的自定义函数（例如一个变量），你可以使用Object.prototype.SayIt = function(s){return this+s;}; var ramone='Hey Ho, '; var s = 'Lets go'; console.log(ramone.SayIt(s));。如果遇到问题，请使用Object.defineProperty(Object.prototype, "SayIt", {value: function (s) { your stuff here }});
@Nick Craver 你可以向用户定义函数添加参数吗？如果可以，你将如何使用它 {function myFunction(val1, val2) { //你将如何在这里使用它}} 以及你将如何调用功能...谢谢
这对我不起作用。 Ruslan López Carro 的作品（如下）。
@NickCraver if myFunction 带参数在调用过程中如何将参数传递给函数myFunction？谢谢

【解决方案2】：

试试这个。它总是有效的。

$(document).ready(function() {
  $('#btnSun').click(function() {
    $.fn.myFunction();
  });
  $.fn.myFunction = function() {
    alert('hi');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnSun">Say hello!</button>

【讨论】：

我想把时间浪费在一些愚蠢的事情上。我尝试了这里提到的所有代码，但甚至无法 alert(0); 它。试图找出解决方案，在这里，我按下了F12，似乎我的 AdBlocker 阻止了某些内容的显示。阅读更多：Failed to load resource in chrome google.maps api

【解决方案3】：

正如 Jaboc 评论的那样，它们被称为插件。为了有意义，插件函数应该对它被调用的元素做一些事情。考虑以下几点：

jQuery.fn.make_me_red = function() {
    return this.each(function() {
        this.style.color = 'red';
    });
};

$('a').make_me_red();

【讨论】：

【解决方案4】：

以下是正确的方法

$(document).ready(function() {
    $('#btnSun').click(function(){
        $(this).myFunction();
     });
     $.fn.myFunction = function() { 
        alert('hi'); 
     }
});

【讨论】：

【解决方案5】：

试试这个$('div').myFunction();

这应该可以工作

$(document).ready(function() {
 $('#btnSun').click(function(){
  myFunction();
 });

function myFunction()
{
alert('hi');
}

【讨论】：

那么是不是说我们不能像往常一样在Jquery中创建用户定义的函数并调用呢？
嘿它对我有用 $('div').myFunction(); :-)。八级！！你能帮我理解这种行为吗？为什么我们需要 $('div').myFunction()... 为什么我不能将 myFunction 称为普通函数？
您正在将其分配给 jQuery 对象。
因为myFunction不是一个普通的函数，它是jQuery对象原型的一个属性，所以你可以调用$('div').myFunction()。如果您只想拨打myFunction，那么为什么不直接拨打function myFunction (){}？

【解决方案6】：

jQuery.fn.make_me_red = function() {
    return this.each(function() {
        this.style.color = 'red';
    });
};

$('a').make_me_red() // - instead of this you can use $(this).make_me_red() instead for better readability.

【讨论】：

【解决方案7】：

$(document).ready(function() {
  $('#btnSun').click(function(){

      myFunction();

   });

   $.fn.myFunction = function() { 
     alert('hi'); 

    }; 
});

放'; ' 在函数定义之后...

【讨论】：

【解决方案8】：

jQuery.fn.make_me_red = function() {
    alert($(this).attr('id'));
    $(this).siblings("#hello").toggle();
}
$("#user_button").click(function(){
    //$(this).siblings(".hello").make_me_red(); 
    $(this).make_me_red(); 
    $(this).addClass("active");
});

jQuery中的函数声明和回调。

【讨论】：

【解决方案9】：

function hello(){
    console.log("hello")
}
$('#event-on-keyup').keyup(function(){
    hello()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="text" id="event-on-keyup">

【讨论】：

【解决方案10】：

jQuery.fn.clear = function()
{
    var $form = $(this);

    $form.find('input:text, input:password, input:file, textarea').val('');
    $form.find('select option:selected').removeAttr('selected');
    $form.find('input:checkbox, input:radio').removeAttr('checked');

    return this;
}; 


$('#my-form').clear();

【讨论】：

【解决方案11】：

在我的情况下，我做到了

function myFunc() {
  console.log('myFunc', $(this));
}
$("selector").on("click", "selector", function(e) {
  e.preventDefault();
  myFunc.call(this);
});

使用正确的 this 正确调用 myFunc。

【讨论】：