jQuery easyconfirm插件仅在循环的第一次迭代中起作用

Question

I am using the easyconfirm dialog plugin found here - http://www.projectshadowlight.org/jquery-easy-confirm-dialog/

I am also using a classic asp do while loop to print the that it attached to, see sample below;

<% Do while not rs.EOF %>
    <a href="#" id="yesno">This link</a>
<% rs.MoveNext()
Loop %>

You get the idea.

My Jquery for this is straight out of the docs;

$("#yesno").easyconfirm({locale: { title: 'Are you sure?', button: ['No','Yes']}});

$("#yesno").click(function() {
    alert("You clicked yes");
});

The problem i am having is that the dialog is only working on the first link in the loop, if its returning more than 1, then the first work but the rest dont and it doesnt throw any errors, it just adds the # to the URL

Any help would be awesome :)

Answer 1

The thing and the problem here is that you have the same id for the different links, you need to give them different id's or give them a class attribute, for example:

<% Do while not rs.EOF %>
    <a href="#" class="yesno">This link</a>
<% rs.MoveNext()
Loop %>

This will be your new js, take into account that we are putting in the selector the "a" elements with the class yesno.

$("a.yesno").easyconfirm({locale: { title: 'Are you sure?', button: ['No','Yes']}});

$("a.yesno").click(function() {
    alert("You clicked yes");
});

Answer 2

Looking at your source code it seems that you're binding your easyconfirm action to a DOM element through #yesno id. Now, since your list could contain more than one element, this bind by id will work just on one of them since identifiers should be unique. My suggestion then, is to use a CSS class selector.

I'd go with something like:

<% Do while not rs.EOF %>
    <a href="#" class="yesno">This link</a>
<% rs.MoveNext()
Loop %>

and

$(".yesno").easyconfirm({locale: { title: 'Are you sure?', button: ['No','Yes']}});

$(".yesno").click(function() {
    alert("You clicked yes");
});

So, basically, the jQuery binding here will go through the CSS class selector.

Answer 3

You can't have more than one elements in your DOM with the same id. Use classes instead

<a href="#" class="yesno">This link</a>


$(".yesno").each(function() {
    $(this).easyconfirm({locale: { title: 'Are you sure?', button: ['No','Yes']}});
    $(this).click(function() {
        alert("You clicked yes");
    });
});