JQuery 事件侦听器按名称和参数调用函数

Question

我看过与此类似的其他问题，但我似乎无法找到我正在寻找的答案。

有没有办法将参数传递给 JQuery 事件侦听器中的命名函数？

例如，我知道我可以做到这一点

$('#myelement').on("change", function(){
  var value = $(this).val();   
  myFunction(value);
});

但是有什么方法可以将函数名称传递给事件侦听器吗？

像这样的东西

$('#myelement').on("change", myFunction($(this).val()));

老实说，我认为这是直截了当的，但我似乎找不到办法做到这一点。

Answer 1

您可以使用 jQuery .on()方法将参数传递给处理函数。

它的格式是.on( events [, selector ] [, data ], handler ) ，其中data是您需要传递的任何对象。 稍后可以通过处理程序中的event.data属性访问它。

检查这个例子。 请注意，如果您只想访问$(this).val()则不需要任何参数： myFunction已经绑定到目标元素，因此您可以在其中使用$(this).val() 。

 $("#i").on("change", null, "My parameter", myFunction); function myFunction(event) { console.log("Parameter: " + event.data); console.log("$(this).val() = " + $(this).val()); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="i"> Enter something and press Enter

Answer 2

您可以使用 jQuery “ on ” 方法，然后调用click事件侦听器，最后但并非最不重要的是调用您创建的函数。

 $('button').on('click', clicked); function clicked() { var val = $('#one').val(); $('.response').html('<p>Value is ' + val + '</p>'); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <input type="text" id="one"> <button>Click Me</button> <p class="response"></p>

Answer 3

假设我明白你想要什么，我使用的一种解决方法是引用数组中的函数，如下所示

 list_of_functions = [function_1,function_2]; function function_1(){ alert("function 1 running"); } function function_2(){ console.dir("function 2 running"); } function run_function(function_index){ return list_of_functions[function_index](); } $("#function_select").on("change",function(){ run_function(this.value); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="function_select"> <option disabled selected>Please select a function</option> <option value="0">function 1</option> <option value="1">function 2</option> </select>