将参数传递给jQuery中的click事件

时间:2017-04-11 21:27:34

标签: javascript jquery click

我有一个onclick事件,它将$(this)参数传递给函数。

<tr class="myTr">
  <td>
    Han Solo
  </td>
</tr>  

<script>
$('body').on('click','.myTr',function(){
  doSomething($(this));
});
</script>

现在,我想再添一步。我想显示一个按钮,点击此按钮后,应该调用doSomething()

<tr class="myTr">
  <td>
    Han Solo
  </td>
</tr>  
<button id="myBtn" style="display:none">Submit</button>

<script>
  $('body').on('click','.myTr',function(){
    $('#myBtn').show();
  });
  $('#myBtn').click(function(){
    doSomething(???);
  });
</script>

如何将$(this)传递给第二次点击事件?

我可以轻松地将$(this)存储为按钮的标记,如下所示:

$('body').on('click','.myTr',function(){
  $('#myBtn').attr('origin', $(this));
  $('#myBtn').show();
});
$('#myBtn').click(function(){
  var tr = $(this)attr('origin');
  doSomething(tr);
});

但我想知道是否有更优雅的方法来解决这个问题?

2 个答案:

答案 0 :(得分:1)

您需要以某种方式设置状态

数据属性:

$('body').on('click','.myTr',function(){
  $('#myBtn').data('origin', $(this)).show();
});
$('#myBtn').click(function(){
  var tr = $(this).data('origin');
  doSomething(tr);
});

本地变量

(function () {
    var active;
    $('body').on('click','.myTr',function(){
      active = $(this);
      $('#myBtn').show();
    });
    $('#myBtn').click(function(){      
      doSomething(active);
    });
}());

重新绑定事件:

$('body').on('click','.myTr',function(){
  var active = $(this);
  $('#myBtn')
    .off("click.tr")
    .on("click.tr", function () {
      doSomething(active);
    })
    .show();
});

CSS课程:

$('body').on('click','.myTr',function(){
  $(".myTr.active").removeClass("active");
  $(this).addClass("active");
  $('#myBtn').show();
});
$('#myBtn').click(function(){
  var tr = $(".myTr.active");
  doSomething(tr);
});

答案 1 :(得分:1)

只需使用jQuery中的foreach ($items as $item) { $query = $connection->prepare("INSERT INTO items (ItemName) VALUES (:ItemName)"); $query->execute(array(':ItemName' => $item)); }

即可

$.proxy
$('body').on('click','.myTr',function(){
  $('#myBtn').show();

    $('#myBtn').off('click').on('click', $.proxy(function(e) {
        doSomething(this)
        // how you access the context of the button is using $(e.currentTarget)
    }, this));
});


window.doSomething = function(elem){
	console.log(elem)
}
#myBtn{
	display:none;
}