使用Image Button的onClick事件调用jQuery函数

Question

我有一个表单，其中使用PHP构建动态数据表。在每一行中都有一个图像，当点击它时会通过点击事件调用jQuery函数。

例如，如果图像的id为eventnfo_0，我的函数如下：

$("#eventnfo_0").click(function()

只要我为每一行定义了一个click事件，一切正常。问题是，我需要将其设置为动态，因为行数可能会有所不同，因此如上所述为每一行构建单独的函数是不可行的。

我的想法是必须有一种从onclick事件调用jQuery函数并传递行号的方法，但到目前为止，没有骰子。

我确信这不是一项不寻常的任务，但我的搜索没有运气。

任何想法都表示赞赏。

Answer 1

有很多方法可以做到这一点...在每个img中调用相同的类并将其用作选择器......

$('.yourClassName').click(function(){alert($(this).attr('id'));});

或

 $("[id^='eventnfo_']").click(function(){
     alert($(this).attr('id'));
 });

因为它是动态添加的，这可能会有所帮助..

$(document).on('click',"[id^='eventnfo_']".click(function(){
     alert($(this).attr('id'));
 });

<强>更新

你可以使用data属性作为rownumber并从jquery获取它。

说这是你的HTML。

 <img id="eventnfo_0" data-rownumber="1"/>

和jquery

$("[id^='eventnfo_']").click(function(){
     alert($(this).data('rownumber')); //this will alert 1
 });

Answer 2

$("[id^='eventnfo_']").click(function(){
   alert(this.attr('id'));
});

Answer 3

如果您要查找动态行，则无法使用.click，您应该使用.on方法，这是首选方式。

JS代码

$("#table_id").on("click","tr [id^='eventnfo_']", function(){
 //your code goes here.
});

上面称为jQuery事件委托。 Read more