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处理

e.g：

<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;
    });
});

Answer 2

这是因为你的所有按钮都有相同的id.hd中的一个元素应该是唯一的。

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

Answer 3

使用课程或使用不同的ID ，如：

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

或使用类： jsFiddle

Answer 4

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

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

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

Answer 5

您可以在元素和点击功能中使用class而不是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;
    });
});

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

5 个答案: