0

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

我有以下 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;
    });
});

单击时仅触发链接的第一个实例，当我单击第二个“轻推”链接时，没有任何反应，第一个实例正常工作。如果页面上只显示一个链接，那么它可以正常工作。

有任何想法吗？

4

2 回答 2

6

您正在绑定一个 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;
});

});

于 2013-01-24T13:30:08.413 回答
0

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

<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')为$(this).

于 2013-01-24T13:31:33.730 回答