我有这样的表单:
<?php foreach($userID as id):?>
<input type="button" id="ok_<?php echo id?>" value="ok" />
<input type="button" id="cancel_<?php echo id?>" value="cancel" />
<?php endforeach;?>
<script>
$(document).ready(function(){
//how do i set the click events of these buttons, assuming i have 3 sets of the of the ok and cancel buttons.
});
</script>
只需根据按钮的值属性选择按钮:
$(document).ready(function(){
$('[value="ok"]').on('click', function(ev) {
alert($(this).attr('id'));
});
});
我相信这就是您所需要的:
<script type="text/javascript">
$(document).ready(function(){
$('input[id*=ok_]').bind('click', function(e){
console.log($(this));
});
$('input[id*=cancel_]').bind('click', function(e){
console.log($(this));
});
})
</script>
您可以使用delegate
,并且每种类型的按钮只能附加一个处理程序。它将处理任意数量的按钮点击事件。试试这个。
$(document).delegate('input[id=^"ok_"]', 'click', function(){
//Write code here
}).delegate('input[id=^"cancel_"]', 'click', function(){
//Write code here
});
.delegate()
参考:http://api.jquery.com/delegate/
如果您使用的是jQuery ver1.7+,那么您可以使用on
。除了前两个参数互换之外,它与委托类似。
$(document).delegate('click', 'input[id=^"ok_"]', function(){
//Write code here
}).delegate('click', 'input[id=^"cancel_"]', function(){
//Write code here
});
注意:在上面的代码中,最好提供一个包含这些元素的容器,而不是指定document
来减少范围。
为什么不为它们设置css类。然后将事件附加到类。
您可以做的最简单的事情是最好为按钮分配一个类,然后给事件
<?php foreach($userID as id):?>
<input class="event" type="button" id="ok_<?php echo id?>" value="ok" />
<input class="event" type="button" id="cancel_<?php echo id?>" value="cancel" />
<?php endforeach;?>
<script>
$(document).ready(function(){
$(".event").click(function() {
// click event code
});
});
</script>