jQuery - .each 函数中的 preventDefault()

Question

I want to use preventDefault() in .each function for collection of buttons and its not working. When I use it with one .click function it works fine but inside .each is not

Whan am I doing wrong?

Here is my .js code

$(document).ready(function() {

    var findingStatus = $('#findingStatus').attr('finding-status-type');
    var findingLike = $('#finding_like_btn');
    var findingDislikeBox = $('.finding_dislike_add');
    var findingDislikeCollection = $('.finding_dislike_add_btn')
    var findingUnlike = $('#finding_unlike_btn');
    var findingDislikeRemoved = $('#finding_dislike_removed');

    var alertBox = $('.alert-box').hide();



    if (findingStatus == 0) {
        findingDislikeBox.show();
        findingUnlike.hide();
        findingDislikeRemoved.hide();
    }
    else if (findingStatus == 1) {
        findingDislikeBox.hide();
        findingUnlike.show();
        findingDislikeRemoved.hide();
    } 
    else if (findingStatus == 2) {
        findingDislikeRemoved.show();
        findingUnlike.show();
        findingDislikeBox.hide();
        findingLike.hide();

    }

    findingDislikeCollection.each(function() {



        var findingDislike = $(this).clone();
        var url = findingDislike.attr("href");

        findingDislike.click(function(event) {

            event.preventDefault();

            $.ajax({
                url: url,
                type: "POST",
                dataType: "json",
                success: function(data) {

                    if (data.profileState == 1) {

                        $('#dislike_count_btn').text('Odrzuć' + data.DislikeCount);
                        findingDislikeBox.hide();
                        findingDislikeRemoved.show();
                        findingUnlike.show();
                        //findingUnDislike.show();
                        //findingUnDislike.attr('disabled', false );
                        //findingUnDislike.text('Cofnij');
                    }
                    else {
                        alertBox.show();
                        if ($('.alert-box-msg').length==0) {
                            $('.alert-area').prepend('<p class="alert-area alert-box-msg">Żeby korzystać z tej funkcji musisz być zalogowany.</p>');

                        }
                        findingDislike.attr('disabled', false );
                    }

                },
                error: function() {
                    alert('Problem z serwerem, spróbuj ponownie za kilka minut.');
                    findingDislike.attr('disabled', false );
                }

            });


        });



    });



    $('html').click(function (e) {
        if (!$(e.target).hasClass('alert-area')) {
            $('.alert-box').hide();
            findingDislike.attr('disabled', false );
        }
    });


});

Thanks for answer

Answer 1

You are cloning the element with .clone which means you're not actually attaching an event listener to anything in the DOM. Cloned elements must be manually inserted into the DOM with JavaScript for them to have any effect.

Answer 2

This is not a correct way. Following should work:

findingDislikeCollection.click(function(event){
  var findingDislike = $(this);
  var url = findingDislike.attr("href");
  //AJAX call
  event.preventDefault();
});

More details on click event are given here: https://api.jquery.com/click/