-1

クリックは、dom に最初に読み込まれた要素に対して機能しますが、最近追加されたアイテムをクリックしようとすると機能しません。を試しました.liveが、まったく機能.delegateし.onません。コードは次のとおりです。

私はこれを使用しましたが、機能しませんでした。それでもページが更新されます。

$('.forms').on('click', '.button-like', function() {
    var $parent = $(this).parent('.forms');
    var $thisItem = $parent.find('.button-like');
    console.log($parent);
    $(this).submit(function () {
        var data = {
            "action": "like"
        };
        data = $parent.serialize() + "&" + $.param(data);
        var itemId = $parent.find('input.id').val();
        $.ajax({
            type: "POST",
            url: "/actions/",
            data: data,
            success: function (data) {
                console.log('Like submitted successfully sent');
                //$thisItem.addClass('isliked');
                $thisItem.after('<button class="ajax instabtn button-unlike unlike icon-heart" type="submit" name="action" value="Unlike"></button>');
                $thisItem.remove();
            }
        });
        return false;
    });
    $(this).submit();
});

この上記のコードは、ページに新しく追加されたアイテムではまったく機能しません。ページを更新し続けますか?

興味のある追加コードは次のとおりです。

success: function(data) {
            // Output data
            $.each(data.images, function(i, src) {
            var $content = $('<article class="instagram-image"><form id="'+ data.images[i].data_token +'" class="forms status-'+ data.images[i].data_like +'" action="'+base+'" method="post"><a class="fancybox" href="'+ data.images[i].data_link +'"><img alt="' + data.images[i].data_text + '" src="' + data.images[i].data_url + '" alt="' + data.images[i].data_text + '" /></a><input type="hidden" name="id" value="'+ data.images[i].data_id +'"><p>'+ data.images[i].data_likes +'</p></form></article>');
              $('section#images').append($content);
              if( $content.find('form').hasClass("status-false") ){
                    $content.find('form').addClass("notLiked");
                    //$('.notLiked').find('button.unlike').hide();
                    $content.find('form a').after('<button class="ajax instabtn button-like like icon-heart" type="submit" name="action" value="Like"></button>');
                }
                if( $content.find('form').hasClass("status-true") ){
                    $content.find('form').addClass("Liked");
                    //$('.Liked').find('button.like').hide();
                    $content.find('form a').after('<button class="ajax instabtn button-unlike unlike icon-heart" type="submit" name="action" value="Unlike"></button>');
                }
              });
            // Store new maxid
            $('#more').data('maxid', data.next_id);
          }

私は絶対にすべてを試しましたが、それでもうまくいきません。ロジックが間違っているのだろうか？

乾杯、マーク

4

1 に答える 1

0

これはうまくいくでしょうか？

$('.forms').submit(function() {
    var $parent = $(this);
    var $button = $parent.find('.button-like');

    var data = {
        "action": "like"
    };
    data = $parent.serialize() + "&" + $.param(data);
    var itemId = $parent.find('input.id').val();
    $.ajax({
        type: "POST",
        url: "/actions/",
        data: data,
        success: function (data) {
            console.log('Like submitted successfully sent');
            //$thisItem.addClass('isliked');
            $button.after('<button class="ajax instabtn button-unlike unlike icon-heart" type="submit" name="action" value="Unlike"></button>');
            $button.remove();
        }
    });
    return false;
});
于 2013-08-09T11:08:02.800 に答える