jquery .css function not working after ajax success

Question

i have this css which makes div unclickable

.commentpost{
  pointer-events: none;
}

with this html

<div class="commentsDiv">
//some code to show the comments from db
//
  <div class="w-100">
      <div class="div-bottom-3 d-flex " style="position: absolute;">
           <div class="form__group">
                <input type="text" class="form__input comment" id="comment" 
                    placeholder="Add a comment" name="comment"/>
           </div>
           <div class="pt-1 commentpost">
                Post
           </div>
      </div>
  </div>
</div>

and this jquery

$(document).ready(function(){
  // makes commentpost div clickable if input is not empty
  $('.comment').keyup(function() {
    $('.commentpost').css('pointer-events','auto');
    if(!$.trim($('.comment').val()).length){
      $('.commentpost').css('pointer-events','none');
    }

 $('.commentpost').on('click',function(e){
     //ajax call happens
     //and on success reload div commentsDiv with .load()
 })
});

after ajax success it saves the comment in db and shows it in another div but I cant press the post div again, pointer-event stays none

nlstm · Accepted Answer · 2021-05-10 04:20:04Z

2

I have an idea,

try doing this,

 $(document).on('click','.commentpost',function(e){
     //ajax call happens
     //and on success reload div commentsDiv with .load()
 })

using the document to understand if there is a clickable element, since I think you have the clickable div being changed.

It works good because if elements are being dynamically created via ajax jquery, you go to understand that those new divs did not exist on document ready, only the original one, so document on click looks at what exists in the document currently everytime and prevents event bubbling when divs changes

answered May 10, 2021 at 4:20

nlstm

755 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

eksoo Over a year ago

thanks dude this + placing the clickable div outside the loaded div made it work

nlstm Over a year ago

No problem, when I write .on click, I always write it in that fashion I described above, I cant think of a reason not to, especially if you ever have multiple things happening on a div at different times or if elements are created by jquery, same thing with .on keyup same setup above is always best to use.

Collectives™ on Stack Overflow

jquery .css function not working after ajax success

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related