Question

我正在使用像

这样的通用onclick事件创建一堆元素

function foo( i , j ) {
   alert("foo");
   //dostuff 
};

for (i = 1; i < 8; i++){
  var clas = get_class_for_index( i );
  for ( j = 0; j < 96; j++){

     // tbody > #(i) is a <tr>
     $("#table > tbody > #" + i ).append( function(){
         // I want to give ( i , j ) to foo
         return $("<td id='" + j + "' class='" + clas + "'></td>").on("click", foo );
     });

  };
};

那么，我怎么能把这些论点给foo呢？我也可以使用它们的ID和它们（i，j），但我如何从foo中获取它们？

Answer 1

我可以将参数传递给事件处理程序吗？

不，你不能。事件处理程序函数在事件发生时执行，您没有调用foo()来传递i和j，foo()即使在循环执行完成后也会执行，并且不存在i＆amp; j。

那么在我的情况下我能做些什么。

最好的方法是将i和j值添加到DOM元素本身，以便您可以在事件处理函数中访问它。您可以使用jQuery的data（）方法向DOM添加额外信息。

function foo(evt) {
  $(evt.currentTarget).data() //You will get here all values, i.e. i & j
    //dostuff 
};

for (i = 1; i < 8; i++) {
  var clas = get_class_for_index(i);
  for (j = 0; j < 96; j++) {

    // tbody > #(i) is a <tr>
    $("#table > tbody > #" + i).append(function() {
      // I want to give ( i , j ) to foo
      return $("<td id='" + j + "' class='" + clas + "'></td>").data({
        i: i,
        j: j
      }).on("click", foo);
    });

  };
};

Here更新了小提琴。

Answer 2

你需要在这里使用闭包和IIFE，否则因为作用域结束，你最终会将i or j的最后一个迭代值传递给事件处理程序。

像这样 ：

var $anchors = $("a");

function foo(idx) {
   alert("foo " + idx);
};

for(var i = 0; i < $anchors.length; i++) {
    $anchors.eq(i).on("click", (function(i) {
        return function(e) {
            foo(i);
        }
    }(i)));    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">Link</a> | <a href="#">Link</a> | <a href="#">Link</a> | <a href="#">Link</a>

在上面的例子中，我们使用一个立即执行的函数（以i作为参数）并返回一个函数，然后将其绑定为click处理程序并传递正确的i到你的foo。这称为IIFE（立即引入的函数表达式）。

Answer 3

您需要使用jquery on函数才能在创建元素时将事件注册到元素，您可以使用元素的Id将事件附加到它并在事件回调函数中调用foo。

我添加了一个使用了i和j的组合id的工作剪辑，如下所示

＆＃13;

function foo( i , j ) {
       console.log(i+"_"+j);
       alert(i+"_"+j);
       //dostuff 
    };
    
    for (i = 1; i < 8; i++){
      var clas = "aa_"+i;
      
       $("#table").append("<tr id='" + i + "'></tr>");
         
      for ( j = 0; j < 96; j++){
    
         // tbody > #(i) is a <tr>

         $("#table > tbody > #" + i ).append( function(){
             // I want to give ( i , j ) to foo
             return $("<td id='test_" + i + "_" + j + "' class='" + clas + "'>aa</td>").on("click",    function(){
               
               
               var id = $(this).attr("id").split('_');
               //console.log(id);
               foo(id[1],id[2]);
           } );
         });
    
      };
    };

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table"></table>

＆＃13;

Answer 4

使用事件处理程序时，您可以使用jquery的.on（）作为此示例的事件处理程序。

$("#id").on("click", function(){   
  //do stuff here or call a function; 
});

参考：http://api.jquery.com/on/

为通用事件处理程序提供参数

4 个答案: