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

【问题标题】：Jquery dialog not working if there are multiple buttons on the page如果页面上有多个按钮，则 Jquery 对话框不起作用
【发布时间】：2012-05-21 19:31:06
【问题描述】：

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

我想在单击按钮时添加一个确认 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/

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

提前谢谢你！

【问题讨论】：

标签： jquery jquery-ui jquery-ui-dialog

【解决方案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;
    });
});

【讨论】：

谢谢！像魅力一样工作。给你点，但公平地说，我会接受第一个发布解决方案的人作为答案:)

【解决方案2】：

使用类或使用不同的 id ，例如：

$('#confirm1, #confirm2').click(function() {
    $('#dialog').dialog('open');
    return false;
    });
});

或使用类： jsFiddle

【讨论】：

谢谢！像魅力一样工作。你是第一个提出班级想法的人，所以你是赢家。非常感谢！

【解决方案3】：

id 对于每个项目都应该是唯一的.. 但是您可以尝试使用 on() 逃脱，尽管不建议这样做：

http://jsfiddle.net/S4vSU/7/

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

【讨论】：

在您的示例中工作，但不在我的页面上：|诡异的。但是，更改类的 id 更容易更好。无论如何，谢谢你；）点给你。

【解决方案4】：

这是因为您所有的按钮都有相同的 id。html 中元素的 ID 应该是唯一的。

你可以让所有人都和我一样上课here

【讨论】：

谢谢！正如你所说，我可以使用类而不是 id。给你点，但公平地说，我会接受第一个发布解决方案的人作为答案:)

【解决方案5】：

您也可以在元素和点击功能中使用类而不是 ID。

<a class="confirm" href="javascript:;">Confirm 1</a>
<a class="confirm" href="javascript:;">Confirm 2</a>
...
$('.confirm').click(function() {
    $('#dialog').dialog('open');
    return false;
    });
});

【讨论】：

谢谢！这就是解决方案:) 指向你！