Question 91643 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Problem when clicking button again in javascript – Jquery

I have a comment page that has a reply and cancel reply button. Using the following code when the reply button is clicked the cancel reply button will appear instead. There is only one problem, when the reply button of one comment is clicked, without clicking the cancel reply button of that comment I click the reply button of another comment, the reply button of the previous comment disappears. My level of knowledge of JavaScript is low. The code above solves all my needs, there is only one problem that I said, the code should be edited so that it does not destroy my other needs.

<script>
    jQuery( function( $ ){
        $( '.comment-reply-link' ).on( 'click', function(){
            var commentContainer = $(this).closest('.comment_container');
            commentContainer.find('.comment-reply-link').hide();
            $( '#cancel-comment-reply-link' ).insertAfter( this ).show();
        } );
        $( '#cancel-comment-reply-link' ).on( 'click', function(){
            var commentContainer = $(this).closest('.comment_container');
            commentContainer.find('#cancel-comment-reply-link').insertAfter(this).hide();
            commentContainer.find('.comment-reply-link').show();
        } );
    } );
</script>
Tags:

2

Answers


  1. 0

    I think it’s because you’re using an id '#cancel-comment-reply-link'

    Try instead of unsing a id like

    <div id="cancel-comment-reply-link"></div>

    TO

    <div class="cancel-comment-reply-link"></div>

    Because an id is unique to a DOMelement according to MDN.Mozilla

    And change the script to:

    <script>
    jQuery( function( $ ){
        $( '.comment-reply-link' ).on( 'click', function(){
            var commentContainer = $(this).closest('.comment_container');
            commentContainer.find('.comment-reply-link').hide();
            $( '.cancel-comment-reply-link' ).insertAfter( this ).show();
        } );
        $( '.cancel-comment-reply-link' ).on( 'click', function(){
            var commentContainer = $(this).closest('.comment_container');
            commentContainer.find('.cancel-comment-reply-link').insertAfter(this).hide();
            commentContainer.find('.comment-reply-link').show();
        } );
    } );
</script>
    Login or Signup to reply.
  2. 0

    If I understand correctly, the issue you are facing is the following:

    1. The user clicks a "Reply" button
    2. The user then clicks another "Reply" button
    3. The first clicked "Reply" button is no longer visible

    If the above is the case, the issue is that you’re not "unhiding" the first "Reply" button clicked (in step 1), when you click the second "Reply" button in step 2.

    $('.comment-reply-link' ).on( 'click', function(){
    // HERE - CHECK TO SEE IF A REPLY BUTTON WAS CLICKED BEFORE!
    // IS IT STILL HIDDEN?
        // YES -> UNHIDE
        // NO -> CONTINUE

    var commentContainer = $(this).closest('.comment_container');
    commentContainer.find('.comment-reply-link').hide();
    $( '#cancel-comment-reply-link' ).insertAfter( this ).show();
});

    There are a few ways you can fix this. One quick way is just showing the .comment-reply-link before you call $( '#cancel-comment-reply-link' ).insertAfter( this ).show();

    Something like:

    $('.comment-reply-link' ).on( 'click', function(){
    var commentContainer = $(this).closest('.comment_container');
    commentContainer.find('.comment-reply-link').hide();
    $('#cancel-comment-reply-link').parent().find('.comment-reply-link').show()
    $( '#cancel-comment-reply-link' ).insertAfter( this ).show();
});

    Other ways are applying some sort of "state" to the reply element (a class, data attribute), and querying that (to show when you click another reply later).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search