Ajax call works only first time

156
April 13, 2018, at 11:30 PM

This is my code, to modify the content of a table cell, clicking a link "Open/Close" of the sibling cell.

The link works good the first time but on the second click, the execution start again from

$("a[href*='close']").click(function (event)

even if the new link contains "open" and not the word "close" anymore.

Why have I this behaviour? Which is the problem? How can I solve it?

Thanks in advance!

$(document).ready(function()
    {
        $("a[href*='close']").click(function (event)
        {
            event.preventDefault();
            var click = $(this);
            console.log(click);
            var url = click.attr("href");
            console.log(url);
            var nid = url.split("/")[1];
            console.log(nid);
            // var url = "close/" + nid;
            // console.log(url);
            $.get(url, function(data, status)
            {
                if (data.status == 1)
                {
                    console.log(data.res);
                    click.text("Open");
                    var new_url = url.replace("close", "open");
                    console.log("New Url = " + new_url);
                    click.attr("href", new_url);
                    click.parent().prev().text(data.res);
                }
                else
                {
                    console.log("Error");
                }
            });
        });        // CHIUDE FUNZIONE
        $("a[href*='open']").click(function (event)
        {
            event.preventDefault();
            var click2 = $(this);
            console.log(click2);
            var url = click2.attr("href");
            console.log(url);
            var nid = url.split("/")[1];
            console.log(nid);
            // var url = "open/" + nid;
            // console.log(url);
            $.get(url, function(data, status)
            {
                if (data.status == 1)
                {
                    console.log(data.res);
                    click2.text("Close");
                    var new_url = url.replace("open", "close");
                    console.log("New Url = " + new_url);
                    click2.attr("href", new_url);
                    click2.parent().prev().text(data.res);
                }
                else
                {
                    console.log("Error");
                }
            });
        });        // CHIUDE FUNZIONE
Answer 1

As I stated in my comment to the question, you can use a delegate event binding, rather than juggling event bindings, to allow events to only be processed by the logic that you want them to be processed by.

$(document).on('click', 'a[href*="close"]', function (event) { 
  event.preventDefault(); 
  console.log('close'); 
  event.target.href = '#open'; 
}); 
 
$(document).on('click', 'a[href*="open"]', function (event) { 
  event.preventDefault(); 
  console.log('open'); 
  event.target.href = '#close'; 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<a href="#open">Toggle</a>

READ ALSO
Working out time inbetween time to percentage Javascript

Working out time inbetween time to percentage Javascript

I'm trying to work out a percentage from 0 - 100 from a part of HTML video

72
Redirect via JS depending on location.href

Redirect via JS depending on location.href

What I try to do is, if a user visits a site with a specific string in the url, he should be redirected randomly to site A or site B

94
How to include jQuery Plugin Mapael into Angular 5?

How to include jQuery Plugin Mapael into Angular 5?

So, I tried following a bit how other questions dealt with the problem of including jQuery PluginsBut let's start with the basics first

116
$.ajax does not work on internet explorer (with cache:false)

$.ajax does not work on internet explorer (with cache:false)

This method should return a json object, instead of that alert pops outI have added cache : false beacuse i have noticed that it helps with using ajax on internet explorer but it still does not work

105