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

I am trying to call a user defined function in jQuery:

我试图在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>

I tried the following as well:

我也尝试了以下内容：

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

It doesn't seem to work! Any idea where I am wrong?

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

9 个解决方案

#1

If you want to call a normal function via a jQuery event, you can do it like this:

如果你想通过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>

#2

Just try this. It always works.

试试吧。它总是有效的。

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

#3

They are called plugins, as Jaboc commented. To make sense, plugin function should do something with the element it is called through. Consider the following:

正如Jaboc评论的那样，它们被称为插件。有意义的是，插件函数应该对其调用的元素执行某些操作。考虑以下：

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

$('a').make_me_red();

#4

The following is the right method

以下是正确的方法

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

#5

Try this $('div').myFunction();

试试这个$（'div'）。myFunction（）;

This should work

这应该工作

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

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

#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

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

Function declaration and callback in jQuery.

jQuery中的函数声明和回调。

#8

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

      myFunction();

   });

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

    }; 
});

Put ' ; ' after function definition...

放'; '在功能定义之后......

#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">

#1