如果页面上有多个按钮,则Jquery对话框不起作用

Question

我的网页上发生了一些奇怪的事情.

我想在单击按钮时添加确认jquery对话框.问题是....我在我的页面上多次使用该按钮,每个按钮都有"id"并由php创建(因此页面上可以有2,3,4,5个按钮).

按钮看起来像这样:

            <a href="#" id="confirm" onclick="addlist(<?php echo $v['id'];?>);return false;"><img src="img/item_add.png" alt="add" width="100" height="46" /></a>

这是我的jquery

  $(document).ready( function(){

$('#dialog').dialog({
    autoOpen: false,
    width: 600,
    buttons: {
        "Ok": function() {
            $(this).dialog("close");
        },
    }
});

$('#confirm').click(function() {
    $('#dialog').dialog('open');
    return false;
    });
});?

问题是,我的jquery代码工作得很好,但只适用于第一个按钮,第二个,第三个......等等

你有我的例子:http: //jsfiddle.net/S4vSU/1/

我希望该对话框适用于每个按钮.问题出在哪儿 ？

先感谢您 !

Answer 1

id特定元素的" "必须在整个页面上是唯一的....
如果没有那么只有一个(第一个)元素将被处理....

解决方案:为所有按钮提供一些类,而不是按类名称进行id处理

例如:

<a class="temp" href="#" id="confirm" onclick="addlist(<?php echo $v['id'];?>);return false;">
    <img src="img/item_add.png" alt="add" width="100" height="46" />
</a>

和其他代码

$(document).ready( function(){

$('#dialog').dialog({
    autoOpen: false,
    width: 600,
    buttons: {
        "Ok": function() {
            $(this).dialog("close");
        },
    }
});

$('.temp').click(function() {
    $('#dialog').dialog('open');
    return false;
    });
});?