0

After manipulating the dom, the click event does not work how can i fix this, i want to achieve a like and dislike action, sojust like the facebook like button on the styles if clicked.

HTML 

<button type="button" id="style-like-{{$style->id}}" class="wider-button pb-skeleton-button-transparent pb-skeleton-button-tq-blue"><i class="fa fa-heart"></i> Like</button>

JQUERY

/* like style */

styleId = $('#style-id').val();

styleLike = $('#style-like-' + styleId);
styleLikeUpdated = $('#style-like-updated-' + styleId);
// styleLike.click(function(){
styleLike.on('click', styleLikeUpdated, function() {

  styleId = $('#style-id').val();
  styleIdAjax = $('#style-id-ajax').val();
  userId = $('#user-id').val();
  like = 1;

  $.ajax({
    url: "style@like@processing",
    type: 'POST',
    data: {'like' : like, 'user' : userId, 'styleId' : styleIdAjax},
    headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') },
context: document.body
  }).done(function(response) {

styleId = $('#style-id').val();

swal("Liked", "Wow you really like this style.", "success");
styleLikeButton = $('#style-like-' + styleId);
styleLikeButton.detach();

console.log(styleLikeButton);

hrBeforeLikeButton = $('#before-like-button');
hrBeforeLikeButton.after(response.dislikeButton);

likeLabel = $('#like-label');
likeLabel.html(response.likeLabel);
  });

});

/* /end like style */

/* dislike style  */

styleId = $('#style-id').val();

styleDislike = $('#style-dislike-' + styleId);
        styleDislikeUpdated = $('#style-dislike-updated-' + styleId);
// styleDislike.click(function(){
    styleDislike.on('click',styleDislikeUpdated, function() {

  styleId = $('#style-id').val();
  styleIdAjax = $('#style-id-ajax').val();
  userId = $('#user-id').val();
  dislike = 0;

  $.ajax({
    url: "style@dislike@processing",
    type: 'POST',
        data: {'dislike' : dislike, 'user' : userId, 'styleId' : styleIdAjax},
    headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') },
context: document.body
  }).done(function(response) {

    styleId = $('#style-id').val();

styleDislikeButton = $('#style-dislike-' + styleId);
styleDislikeButton.detach();

hrBeforeLikeButton = $('#before-like-button');
hrBeforeLikeButton.after(response.likeButton);

likeLabel = $('#like-label');
likeLabel.html(response.likeLabel);
  });

});

/* /end dislike style */
nicael
  • 18,550
  • 13
  • 57
  • 90
udemethegrtman
  • 107
  • 2
  • 14
  • Is the AJAX response replacing the button in the DOM with a new button? – David Jul 29 '16 at 18:38
  • on event does not work for dynamically loaded code. There is an alternative in JQuery that works. – keiv.fly Jul 29 '16 at 18:43
  • @David The question looks similar but I think the issue with his binding is related to dom manipulation – Culyx Jul 29 '16 at 18:45
  • @Culyx: DOM manipulation is exactly what that oft-cited question demonstrates. If an event handler is attached to an element and then that element is later destroyed and replaced with another one, the handler is lost. – David Jul 29 '16 at 18:47
  • @David Misread, I agree – Culyx Jul 29 '16 at 18:48
  • @david yes it is, with a dislike button. – udemethegrtman Jul 29 '16 at 18:54
  • @udemesamuel: In that case the linked question has your answer(s). This is *very often* asked, and that question is basically the canonical response. – David Jul 29 '16 at 18:54
  • @david, you I said destroyed the event handler, yes I did the same exiting handler with the dynamic handler does not work, so I decided to change it to a different handler (style-like-updated) then pass it to the .on(click, 'style-like-updated', function(){}); but still it does not work. – udemethegrtman Jul 29 '16 at 19:01
  • @udemesamuel: That description doesn't make much sense to me, clearly there's a language barrier here. But the point remains that if you're removing/adding elements which have event handlers then those handlers would be lost in the process. The linked question addresses that for handling events on dynamically created DOM elements. – David Jul 29 '16 at 19:04

0 Answers0