0

ユーザーが誰かに何かをするように「ナッジ」できるページがあります

私は次のhtmlを持っています（何度も表示される可能性がありますが、今は2つ表示します）

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

リンクの最初のインスタンスのみがクリックされたときに起動しますが、2番目の「ナッジ」リンクをクリックしても何も起こりません。最初のリンクは正常に機能します。ページに表示されるリンクが1つしかない場合は、正常に機能します。

何か案は？

4

2 に答える 2

6

IDにバインドしており、IDはDOMに1回だけ存在できます。クラスに変更してみてください：

<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 に答える