[英]How to call a function when clicking a dynamically generated link, using jQuery?
I am creating more than 1 <a href="#"></a>
elements dynamically. 我正在动态创建多个1个
<a href="#"></a>
元素。 The id
attribute is also dynamically assigned. id
属性也是动态分配的。 Like <a href="#" id='delete"+id+"'></a>
. 就像
<a href="#" id='delete"+id+"'></a>
。 ID will becomes like delete01, delete02, ...
I want to call a function when clicking any one of these element. ID将变得像
delete01, delete02, ...
单击这些元素中的任何一个时delete01, delete02, ...
我想调用一个函数。 I just know, 我只知道,
$("#someId").click(this.someFunction());
calls the function, when the element with the ID someId
clicked. 单击ID为
someId
的元素时,调用此函数。
The generated HTML looks like, 生成的HTML看起来像,
<a id="delete26" href="#" class="delete">Delete</a>
<a id="delete27" href="#" class="delete">Delete</a>
<a id="delete28" href="#" class="delete">Delete</a>
The JavaScript code that generates the above html looks like, 生成上述html的JavaScript代码如下所示:
html += "<a class='delete' href='#' id='delete"+post.id+"'>Delete</a>";
Here, my ID's were dynamically generated. 在这里,我的ID是动态生成的。 So, how shall i call a function when any one of the element got clicked.
因此,当任何一个元素被点击时,我该如何调用函数。
Any suggestions!!! 有什么建议么!!!
Thanks! 谢谢!
The nicest way to do this is with .delegate()
. 最好的方法是使用
.delegate()
。 This function uses a feature of Javascript called "event bubbling", which means that every time an event is fired on an element (such as click, focus, blur, mouseover) it is also fired on all that element's parent elements. 此函数使用Javascript的“事件冒泡”功能,这意味着每次在元素上触发事件(例如单击,焦点,模糊,鼠标悬停)时,也会在所有该元素的父元素上触发事件。 You can therefore use a common ancestor element to trap all the events.
因此,您可以使用公共祖先元素来捕获所有事件。 The advantage of this is that you can add handlers for events that don't yet exist.
这样做的好处是您可以为尚不存在的事件添加处理程序。
jQuery automates a lot of this for you: jQuery为您自动完成了许多工作:
$('#container').delegate('a.delete', 'click', this.someFunction);
This is very similar to live()
, but in my opinion has nicer syntax and a slight performance increase. 这与
live()
非常相似,但我认为它的语法更好,性能略有提高。
Note that this example assumes that your links are all contained in an element with the id container
. 请注意,此示例假定您的链接全部包含在具有id
container
的元素container
。
You can use jQuery .live() 您可以使用jQuery .live()
$(".delete").live("click", function() {
// take some action
return false;
});
And, if you want to call a named function you'd use the following. 而且,如果您要调用命名函数,则可以使用以下代码。 Note that I'm not using ()
请注意,我没有使用()
$(".delete").live("click", this.someFunction)
You could use the following selector: 您可以使用以下选择器:
$('a[id^=delete]').click(function() {
var number = this.id.match(/^delete(\d+)$/)[1];
return false;
});
使用live方法,并可能使用一个选择器作为$('a.delete')
我假设内容是通过ajax加载的,如果没有,则可以用$('a.delete')
罚款
I have used this quite a lot. 我已经使用了很多。 I don't know if it's the best solution, but try it anyways:
我不知道这是否是最好的解决方案,但还是尝试一下:
In your JavaScript have a function similar to this: 您的JavaScript中有一个类似于以下的函数:
function doStuff(id) { alert("doing things from ID: "+id); }
Then with your href
s do this (using '26' as example ID): 然后使用您的
href
执行此操作(使用“ 26”作为示例ID):
<a href="#" onclick="doStuff(26)" id="26">
It's probably crap but it works 可能是胡扯,但有效
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.