仅首次“点击”触发

Question

我有一个页面，允许用户“轻推”某人做某事

我有以下html（它可能出现很多次，但现在我将显示两个）

<div class="nudgeHolder641">
    <a id="nudge" data-wl_id="641" data-nudge_for="415" data-nudge_from="63" href="#">Nudge</a>
</div>

<div class="nudgeHolder1172">
    <a id="nudge" data-wl_id="1172" data-nudge_for="415" data-nudge_from="63" href="#">Nudge</a>
</div>

我有以下代码来操作点击：

$(document).ready(function(){
    $("#nudge").click(function() {

        var nudge_from = $( '#nudge' ).data( 'nudge_from' );
        var nudge_for = $( '#nudge' ).data( 'nudge_for' );
        var wl_id = $( '#nudge' ).data( 'wl_id' );

        var dataString = 'nudge_from='+ nudge_from + '&nudge_for=' + nudge_for + '&wl_id=' + wl_id;

        $.ajax({
            type: "POST",
            url: "/pages/includes/ajax/nudge.php",
            data: dataString,
            success: function() {

                $('.nudgeHolder'+wl_id).html("<h3>Fantastic!</h3>")
                .append("<p>Nudge Sent!</p>")
                .hide()
                .fadeIn(1500, function() {
                  //$('#message').append("<img id='checkmark' src='/images/icons/check.png' />");
                });
            }
        });
    return false;
    });
});

但是，只有第一个实例在单击时会触发，当我单击第二个“微调”链接时，什么也没有发生，第一个实例按预期工作。 如果页面上仅显示一个链接，则它工作正常。

有任何想法吗？

Answer 1

您绑定到一个ID，并且一个ID在DOM中只能存在一次。 尝试将其更改为类：

<div class="nudgeHolder641">
    <a class="nudge" data-wl_id="641" data-nudge_for="415" data-nudge_from="63" href="#">Nudge</a>
</div>

<div class="nudgeHolder1172">
    <a class="nudge" data-wl_id="1172" data-nudge_for="415" data-nudge_from="63" href="#">Nudge</a>
</div>

然后使用以下方式绑定：

$(function(){
$(".nudge").click(function() {

    var nudge_from = $( this ).data( 'nudge_from' );
    var nudge_for = $( this ).data( 'nudge_for' );
    var wl_id = $( this ).data( 'wl_id' );

    var dataString = 'nudge_from='+ nudge_from + '&nudge_for=' + nudge_for + '&wl_id=' + wl_id;

    $.ajax({
        type: "POST",
        url: "/pages/includes/ajax/nudge.php",
        data: dataString,
        success: function() {

            $('.nudgeHolder'+wl_id).html("<h3>Fantastic!</h3>")
            .append("<p>Nudge Sent!</p>")
            .hide()
            .fadeIn(1500, function() {
              //$('#message').append("<img id='checkmark' src='/images/icons/check.png' />");
            });
        }
    });
return false;
});

}）;

Answer 2

与其使用唯一的div类，不如将它们用作标签上a ID。 像这样：

<div class="nudge">
    <a id="nudgeHolder641" data-wl_id="641" data-nudge_for="415" data-nudge_from="63" href="#">Nudge</a>
</div>

<div class="nudge">
    <a id="nudgeHolder1172" data-wl_id="1172" data-nudge_for="415" data-nudge_from="63" href="#">Nudge</a>
</div>

然后，在jQuery中； 你需要：

$(document).ready(function(){
    $(".nudge a").click(function() {

---

编辑

没注意到您到处都在使用$('#nudge') 。 正如ryadavilli所指出的； 将$('#nudge')替换$('#nudge') $(this) 。