Jquery And Ajax On Click Only Works Once

I am trying to make a like/unlike button with jQuery and Ajax. Problem is that when I like something I can't unlike it until I refresh the page, and if I unlike something, I can't

Solution 1:

Your event doesnt get attached to the elements that are added dynamically after the page load. Try event delegation. Also, since you are changing the id of the button each time, you can use wildcard selector as shown below Use

$('body').on('click', '[id^=unlike]', function(){ // or [id^=like]//your logic
});

instead of

$('#unlike_' + <?echo$pid; ?>).click(function() {
});

and similarly change it for like too.

Solution 2:

The problem is that your id change does only that: it changes the id, but the event handlers for the id aren't assigned to it automatically

Solution 3:

Instead of modifying the element's ID, modify another attribute, such as a class and that way you don't need to re-apply the click event handler and you can use one single event handler to handle ALL the like/unlike buttons instead of looping over them, which looks like what you are doing. And instead of putting a unique number in the ID, you could use the data attribute so that you don't need to worry about extracting the integer from the string (since IDs can't start with integers). In fact, you can completely leave the PHP out of your JavaScript.

So for example, if you have the following HTML:

<divdata-id="12345"class="clickme like"></div><divdata-id="23456"class="clickme unlike"></div>

Where "like" is for a button to like it and "unlike" is for an unlike button. Then you could do the following:

$(document).ready(function() {
    $('.clickme').click(function() {
        // Like it:if ($(this).hasClass("like")) {
            var pid = $(this)attr("data-id");
            $.post("test2test.php", {op: "like", pid: pid});
            $(this).removeClass("like");
            $(this).addClass("unlike");
        }
        // Unlike it:else {
            var pid = $(this)attr("data-id");
            $.post("test2test.php", {op: "unlike", pid: pid});
            $(this).addClass("like");
            $(this).removeClass("unlike");
        }
    });
});

Also, even though this isn't directly related to your question. It is always a good habit to use prepared statements with parameterized queries mysqli, even if the values come from the database or a source you consider to be trustworthy. For example, your $pid variable goes straight into your query opening you up to SQL injection attacks. Just prepare with parameterized queries and don't worry about what goes into your database.

Solution 4:

The button id is changed so the event cannot be triggered. You may use the jQuery ".on()" function instead of ".click()", the event will be trigger even the element is created in the future.

For example,

$('#like_' + pid).on("click",function(){
   alert("The button is clicked");
});

Reference : https://api.jquery.com/on/