1

Okay, so I know the question was worded confusingly but here's what's happening. I have a 'post' element, which is repeated throughout the page that is set up like this:

          <div class="post-basic" id="post-{unique id}">
            <div class="title-card">
              <div class="avatar-sec">
                <img src="{link to avatar}" class="avatar" ref="Avatar" />
              </div>
              <div class="name-card">
                <span class="display-name">{display name}</span>
                <span class="handle">@{handle}</span>
              </div>
              <div class="action">
                <div class="follow-button {filled with either: follow or followed}" id="{unique id}">
                  {filled with either: follow or followed}
                </div>
              </div>
            </div>
          </div>

and my jQuery is set up so that when you click the div.follow-button it'll change to 'followed' and send a POST to php page. Set up like so:

$('.follow-button').click(
  function() {
    var user_id = $(this).attr('id');
    var follow_url = "./func/follow.func.php";
    if ($(this).hasClass("follow")) {
      $(this).removeClass('follow').addClass('followed').text('followed');
      $.ajax({
             type: "POST",
             url: follow_url,
             data: {id:user_id}, // serializes the form's elements.
             success: function(data)
             {
              $('#'+user_id).parents('.post-basic').remove();
              $.ajax({
                     type: "POST",
                     url: "./func/gather.basic.func.php",
                     data: {}, // serializes the form's elements.
                     success: function(data)
                     {   
                      var response = $.parseJSON(data);
                      $('.posts').append('<div class="post-basic" id="post-'+ response[0].streamID_gather +'"><div class="title-card"><div class="avatar-sec"><img src="'+ response[0].avatarSrc +'" class="avatar" ref="Avatar"/></div><div class="name-card"><span class="display-name">'+ response[0].display_name +'</span><span class="handle">@'+ response[0].name +' '+ response[0].followsYou +'</span></div><div class="action"><div class="follow-button '+ response[0].follow +'"id="'+ response[0].streamID_gather +'">'+ response[0].follow +'</div></div></div></div>');
                      }
                   });
              }
           });
      }
  }
);

I am just getting started with jQuery so I'm sure there's plenty of other ways to do this same thing but essentially: when div.follow-button is clicked, the text inside the div changes to followed and the class is changed to followed. Then, sends a POST request to "./func/follow.func.php"; which it does. If the request successfully processes, it'll send another request to "./func/gather.func.basic.php"; which returns a json array. With the array, the jQuery will then append to the container div.posts a new post like the others with the responded data. Which it does. Everything said above works and it's all good. But, when I try and click the follow button with the new div.post it does not work. Is it because the jQuery is already loaded or what?

Muhammad Omer Aslam
  • 22,976
  • 9
  • 42
  • 68
  • appears you want to do something on completion of an ajax call - nesting another ajax call looks "odd" here, just do them both on one? Or use promises perhaps? https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call/14220323#14220323 – Mark Schultheiss Nov 26 '17 at 23:15
  • 1
    Note you may want to hook the event on the container that contains everything. – Mark Schultheiss Nov 26 '17 at 23:15
  • where are you binding `onclick` to the new follow button create after clicking the first `follow` button? – Muhammad Omer Aslam Nov 26 '17 at 23:23

1 Answers1

0

As mentioned in the comments of the OP I believe this is an issue about how event listeners work in javascript.

When you do:

$('.follow-button').click(handlerFunction);

It is binding an event to ONLY the current matching items in the DOM.

If you're adding & removing elements that you want to respond to the same event handler you have 2 options:

1) update event handlers after inserting new content into the DOM... e.g. you need to call $(selector).on('click', handlerFunction) again

OR... a much better solution

2) attach the event to a parent element that is not changing in the DOM... e.g.

$('body').on('click', '.follow-button', handlerFunction);

Attached an event listener to the body of the HTML, but it will only fire the event if the "clicked" item matched the selector...

Also you probably want to put this on a more specific parent element, rather than body. I don't know you're page structure so figured this was an easy example.

abigperson
  • 5,252
  • 3
  • 22
  • 25