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

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

有什么想法吗？

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')替换为$(this)。

只有第一次'点击'射击

2 个答案:

修改