Click events are not functioning properly after an AJAX request is made

Question

Click events are not functioning properly after an AJAX request is made

 $(document).ready(function () {
var user = 1;
 $("a.like").on("click", function () {
            var article = $(this).attr('data-article');
            $.ajax({
                type: "POST",
                url: "WebService.asmx/Like",
                data: "{ 'user': '" + user + "', 'article': '" + article + "' }",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    if(msg.d ==  1)
                    {
                        $(".like[data-article='" + article + "']").fadeOut(700).addClass('unlike').removeClass('like').stop().text('Unlike').fadeIn(700);
                    }
                },
                failure: function (msg) {
                    alert(msg.d);
                }
            });
        });

$("a.unlike").on("click", function () {
            var article = $(this).attr('data-article');
            $.ajax({
                type: "POST",
                url: "WebService.asmx/Unlike",
                data: "{ 'user': '" + user + "', 'article': '" + article + "' }",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    if(msg.d ==  1)
                    {
                        $(".unlike[data-article='" + article + "']").fadeOut(700).addClass('like').removeClass('unlike').stop().text('Like').fadeIn(700);
                    }

                },
                failure: function (msg) {
                    alert(msg.d);
                }
            });
        });
});

Clicking on a link with class like or unlike works as expected, but it does not work when the same link is clicked twice. Research suggests using live instead of click, however live is deprecated as of version 1.8. How can I ensure this function can be triggered multiple times?

javascript jquery html css bootswatch

Answer 1

Answer №1

To implement event delegation in jQuery, utilize the on() method:

$( document ).on( 'click', 'a.like', function () {
    // Perform the click action here
} );

Check out the documentation for http://api.jquery.com/on/

Make sure to attach the on method to a static element that will always be present, such as the document or a main wrapper div. Attaching on to a dynamic element will not function as expected.

Answer 2

To implement event delegation in jQuery, utilize the on() method:

$( document ).on( 'click', 'a.like', function () {
    // Perform the click action here
} );

Check out the documentation for http://api.jquery.com/on/

Make sure to attach the on method to a static element that will always be present, such as the document or a main wrapper div. Attaching on to a dynamic element will not function as expected.

Answer 3

Answer №2

If you prefer utilizing on in place of live, you should write something along the lines of

$('#wrapper').on('click', '.b.dislike', function () {

Given that

$("b.like").on("click", function () {

Functioned similarly to how bind() did before it became obsolete.

If you wish for on() to mimic live(), you must include 3 arguments like in my initial example.

The .on() method associates event handlers with the presently chosen elements in the jQuery object. As of jQuery 1.7, the .on() method offers all the required functionalities for linking event handlers. For assistance in transitioning from older jQuery event techniques, refer to .bind(), .delegate(), and .live(). To eliminate events attached with .on(), look into .off(). To include an event that executes only once and then removes itself, explore .one()

Answer 4

If you prefer utilizing on in place of live, you should write something along the lines of

$('#wrapper').on('click', '.b.dislike', function () {

Given that

$("b.like").on("click", function () {

Functioned similarly to how bind() did before it became obsolete.

If you wish for on() to mimic live(), you must include 3 arguments like in my initial example.

The .on() method associates event handlers with the presently chosen elements in the jQuery object. As of jQuery 1.7, the .on() method offers all the required functionalities for linking event handlers. For assistance in transitioning from older jQuery event techniques, refer to .bind(), .delegate(), and .live(). To eliminate events attached with .on(), look into .off(). To include an event that executes only once and then removes itself, explore .one()

Answer 5

Answer №3

When a user clicks on an "a.unlike" element, the function inside $(document).on() will be triggered.

This use of the on() method is the updated version of live() or delegate().

For more information, you can visit http://api.jquery.com/live/

Answer 6

When a user clicks on an "a.unlike" element, the function inside $(document).on() will be triggered.

This use of the on() method is the updated version of live() or delegate().

For more information, you can visit http://api.jquery.com/live/

Answer 7

Answer №4

To ensure that JavaScript can function properly following an AJAX call, it is necessary to reinitialize your code block. For example:

<div class="clicks">
   // AJAX results appear here. For example, if there are sets of <a>Click me</a>, we simply need to reconstruct our code block when the call is successful. This is because JavaScript only reads elements that already exist after the document loads.
</div>

var xhttp;
if (window.XMLHttpRequest) {
    xhttp = new XMLHttpRequest();
} else {
        // code for IE6, IE5
        xhttp = new ActiveXObject("Microsoft.XMLHTTP");`
        }

xhttp.onreadystatechange = function() {
    if (xhttp.readyState === 4 && xhttp.status === 200) {
        $('.clicks').html(xhttp.responseText);
        // Now reinitialize your functions here
        $('.clicks a').click(function(){
          alert('clicks worked after AJAX call');
        });
    }
};
xhttp.open("GET", "index.html", true);
xhttp.send(null);

Answer 8

To ensure that JavaScript can function properly following an AJAX call, it is necessary to reinitialize your code block. For example:

<div class="clicks">
   // AJAX results appear here. For example, if there are sets of <a>Click me</a>, we simply need to reconstruct our code block when the call is successful. This is because JavaScript only reads elements that already exist after the document loads.
</div>

var xhttp;
if (window.XMLHttpRequest) {
    xhttp = new XMLHttpRequest();
} else {
        // code for IE6, IE5
        xhttp = new ActiveXObject("Microsoft.XMLHTTP");`
        }

xhttp.onreadystatechange = function() {
    if (xhttp.readyState === 4 && xhttp.status === 200) {
        $('.clicks').html(xhttp.responseText);
        // Now reinitialize your functions here
        $('.clicks a').click(function(){
          alert('clicks worked after AJAX call');
        });
    }
};
xhttp.open("GET", "index.html", true);
xhttp.send(null);

Click events are not functioning properly after an AJAX request is made

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Horizontal expanding and collapsing navigation menu

Adding a Key Value pair to every object within an Array using TypeScript

Troubleshooting: Issue with onclick event in vue.js/bootstrap - encountering error message "Variable updateDocument not found"

"The FindByIdAndUpdate function is successfully updating the data, but it is unexpectedly

Retrieving Data from Repeated Component in Angular 6

Codeigniter - Ajax request successful in remote server but fails in local server

Utilizing CSS for a responsive background image

Show whether the day is even or odd with the JavaScript getDay object

What is the best way to reference class variables and methods within a callback function in Typescript?

The pinFileToIPFS method in Pinata IPFS is currently unable to accept files uploaded by users

Retrieving information from PHP using AJAX

The JSON reply was extremely delayed

Conceal the name of a property when displaying it

Is there a way to adjust the font color when the expiration date passes?

Exploring the functionality of event.target.name.value

Prevent Android/PhoneGap Back Button with $.blockUI jQuery Plugin

Is using tables still considered a recommended practice for organizing a layout such as the one shown in the [IMG]?

Is there a way to programmatically simulate clicking on the "Cancel search" button?

Find out the index of a div within an array

What causes my backend to crash when incorrect credentials are entered?