如何设置具有动态ID的按钮';s可点击的jquery


How to set buttons with dynamic ID's clickable jquery

我有这样的表单:

<?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>