How to refer on dynamically created variables

Question

I want to know if it is possible to refer to an dynamically created variables and if yes how?

I create on this site many forms which have p elements on the bottom is one button and if I click that button I want to transmit the variable(IdJB) which was created specific in this form. I marked the variable with a command in the code.

$(document).ready(function() {
  var Id = sessionStorage.getItem('Id');
  var status = 0;
  var nummer = 0;
  $.ajax({
    type: "POST",
    url: "http://localhost/jQuery&PHPnew/Markt.N.php",
    data: {
      status: status
    },
    success: function(data) {
      var anzahl = data;
      status = 1;
      while (anzahl > nummer) {
        nummer++;
        $.ajax({
          type: "POST",
          url: "http://localhost/jQuery&PHPnew/Markt.N.php",
          data: {
            nummer: nummer,
            status: status
          },
          success: function(data) {
            var Daten = JSON.parse(data);
            var Ausgabebereich = document.getElementById('main');
            var IdJB = Daten.id;
            window.IdJB = IdJB; //This Variable !!!!!!!!!!!!!
            var f = document.createElement("form");

            var pInhalt = document.createElement('p');
            var Inhalt = document.createTextNode(Daten.inhalt);
            pInhalt.appendChild(Inhalt);
            f.appendChild(pInhalt);

            var pDatum = document.createElement('p');
            var Inhalt = document.createTextNode(Daten.datum);
            pDatum.appendChild(Inhalt);
            f.appendChild(pDatum);

            var pUhrzeit = document.createElement('p');
            var Inhalt = document.createTextNode(Daten.uhrzeit);
            pUhrzeit.appendChild(Inhalt);
            f.appendChild(pUhrzeit);

            var pGehalt = document.createElement('p');
            var Inhalt = document.createTextNode(Daten.gehalt);
            pGehalt.appendChild(Inhalt);
            f.appendChild(pGehalt);

            var pDauer = document.createElement('p');
            var Inhalt = document.createTextNode(Daten.dauer);
            pDauer.appendChild(Inhalt);
            f.appendChild(pDauer);

            var pAdresse = document.createElement('p');
            var Inhalt = document.createTextNode(Daten.adresse);
            pAdresse.appendChild(Inhalt);
            f.appendChild(pAdresse);

            var pNam_ersteller = document.createElement('p');
            var Inhalt = document.createTextNode(Daten.nam_ersteller);
            pNam_ersteller.appendChild(Inhalt);
            f.appendChild(pNam_ersteller);

            var bInhalt = document.createElement('button');
            var Inhalt = document.createTextNode("Senden");
            bInhalt.appendChild(Inhalt);
            bInhalt.setAttribute("type", "button");
            bInhalt.setAttribute("onclick", "zuJB()");
            f.appendChild(bInhalt);

            Ausgabebereich.appendChild(f);
            $(document).on('click', 'button', function() {

              sessionStorage.setItem('IdJB', IdJB); //Here !!!!!!!!!!!!!
              alert(IdJB);
              window.location = "http://localhost/jQuery&PHPnew/JobBlock.html";

            });
          }

        })
      }
    }
  })
  $("#sub").click(function() {
    window.location = "http://localhost/jQuery&PHPnew/Markt.html";
  })
})

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Jobs</title>
  <script type="text/javascript" src="jQuery.js"></script>
  <script type="text/javascript">
  </script>
</head>

<body>
  <button id="sub">Update</button>
  <a href="Markt.html">Alle Jobs</a>
  <a href="AAAngebote.html">Meine Jobs</a>
  <a href="Einstellungen.html">Einstellungen</a>
  <main id="main">

  </main>
</body>

</html>

This is how the Programm looks like

Dynamic variables are almost always a bad idea. Use an object with dynamic keys. — Barmar, Jan 09 '20 at 22:35
See https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements for events on dynamic elements. — Barmar, Jan 09 '20 at 22:37
Is your problem that the click event isn't firing or that the alert box is empty or do you get an error in the console? — Tyler Gauch, Jan 09 '20 at 22:44
@Barmar Maybe I doesn'T understand it but I had implemented this $(document).on( 'click', 'button', function(){ sessionStorage.setItem('IdJB', IdJB); alert(IdJB); window.location = "http://localhost/jQuery&PHPnew/JobBlock.html"; }); — Hagga Nagga, Jan 09 '20 at 22:45
@TylerGauch I don't get an error it is only so that when I press the button the program runs alerts 3 times the IdJB and than takes the last and submit it to the next page — Hagga Nagga, Jan 09 '20 at 22:47
So it is getting the value of the IdJB just not the correct one? — Tyler Gauch, Jan 09 '20 at 22:50
You have a `while` loop that sends an AJAX request and adds an event handler to all buttons each time. So if the loop runs 3 times, the click handler will run 3 times every time you click. — Barmar, Jan 09 '20 at 22:50
Exactly what @Barmar said and you will only get the last value because you are storing the value in the sessionStorage which is overwriting it each time the loop runs. — Tyler Gauch, Jan 09 '20 at 22:51
@Barmar Yes but how can I fixit that it only takes the value were i clicked the button — Hagga Nagga, Jan 09 '20 at 22:52
Also worth noting you will get the last value in the last loop to run, ajax is asyn so the first call could finish last, order of completion isn't guaranteed — Tyler Gauch, Jan 09 '20 at 22:53
@HaggaNagga could you explain what you want to happen from a user perspective? — Tyler Gauch, Jan 09 '20 at 22:55
@TylerGauch I want that the User Presses the "Senden" Button and than the program sends in the background the id of all the element to the session — Hagga Nagga, Jan 09 '20 at 22:57
Ah okay one sec let me type an answer I think I km now the problem! — Tyler Gauch, Jan 09 '20 at 22:58

score 1 · Accepted Answer · answered Jan 09 '20 at 22:58

Don't use a global variable. Put IdJB in an attribute of the button. You can use the jQuery .data() method for this.

Also, don't add the event handler every time through the loop. When you use event delegation, you should just add the handler once.

$(document).ready(function() {
  $(document).on('click', 'button', function() {
    var IdJB = $(this).data("IdJB");
    sessionStorage.setItem('IdJB', IdJB);
    alert(IdJB);
    window.location = "http://localhost/jQuery&PHPnew/JobBlock.html";
  });

  var Id = sessionStorage.getItem('Id');
  var status = 0;
  var nummer = 0;
  $.ajax({
    type: "POST",
    url: "http://localhost/jQuery&PHPnew/Markt.N.php",
    data: {
      status: status
    },
    success: function(data) {
      var anzahl = data;
      status = 1;
      while (anzahl > nummer) {
        nummer++;
        $.ajax({
          type: "POST",
          url: "http://localhost/jQuery&PHPnew/Markt.N.php",
          data: {
            nummer: nummer,
            status: status
          },
          success: function(data) {
            var Daten = JSON.parse(data);
            var Ausgabebereich = document.getElementById('main');
            var IdJB = Daten.id;
            window.IdJB = IdJB; //This Variable !!!!!!!!!!!!!
            var f = document.createElement("form");

            var pInhalt = document.createElement('p');
            var Inhalt = document.createTextNode(Daten.inhalt);
            pInhalt.appendChild(Inhalt);
            f.appendChild(pInhalt);

            var pDatum = document.createElement('p');
            var Inhalt = document.createTextNode(Daten.datum);
            pDatum.appendChild(Inhalt);
            f.appendChild(pDatum);

            var pUhrzeit = document.createElement('p');
            var Inhalt = document.createTextNode(Daten.uhrzeit);
            pUhrzeit.appendChild(Inhalt);
            f.appendChild(pUhrzeit);

            var pGehalt = document.createElement('p');
            var Inhalt = document.createTextNode(Daten.gehalt);
            pGehalt.appendChild(Inhalt);
            f.appendChild(pGehalt);

            var pDauer = document.createElement('p');
            var Inhalt = document.createTextNode(Daten.dauer);
            pDauer.appendChild(Inhalt);
            f.appendChild(pDauer);

            var pAdresse = document.createElement('p');
            var Inhalt = document.createTextNode(Daten.adresse);
            pAdresse.appendChild(Inhalt);
            f.appendChild(pAdresse);

            var pNam_ersteller = document.createElement('p');
            var Inhalt = document.createTextNode(Daten.nam_ersteller);
            pNam_ersteller.appendChild(Inhalt);
            f.appendChild(pNam_ersteller);

            var bInhalt = document.createElement('button');
            var Inhalt = document.createTextNode("Senden");
            bInhalt.appendChild(Inhalt);
            bInhalt.setAttribute("type", "button");
            bInhalt.setAttribute("onclick", "zuJB()");
            f.appendChild(bInhalt);
            $(bInhalt).data('IdJB', IdJB);
            Ausgabebereich.appendChild(f);
          }
        })
      }
    }
  })
  $("#sub").click(function() {
    window.location = "http://localhost/jQuery&PHPnew/Markt.html";
  })
})

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Jobs</title>
  <script type="text/javascript" src="jQuery.js"></script>
  <script type="text/javascript">
  </script>
</head>

<body>
  <button id="sub">Update</button>
  <a href="Markt.html">Alle Jobs</a>
  <a href="AAAngebote.html">Meine Jobs</a>
  <a href="Einstellungen.html">Einstellungen</a>
  <main id="main">

  </main>
</body>

</html>

Thank you some much I love this community and thanks for your patience also you TylerGauch — Hagga Nagga, Jan 09 '20 at 23:04

score 0 · Answer 2 · answered Jan 09 '20 at 22:36

I may be misunderstanding your question, but if not: In order to reference dynamically created elements, the click handler just needs to be instantiated after the element is created and put in the DOM. An easy way to handle this is by having a function generate your tag like so:

function appendTag(parent, child){
  parent.append(child)
  child.click(function(){
    //Click code here
  });
}

Tyler Gauch · Answer 3 · 2020-01-09T23:10:23.923

So it looks like when you are adding the button click event dynamically you are adding it to all the buttons on the page. This is why when you click one it runs 3 times.

This can be seen by the button text in this line of code:

$(document).on('click', 'button', function() {
           .....
     });

To address this problem you need to make the click listener specific to the button. You can do that by making a more specific button selector. Although it's not a perfect solution one way to do this is to give each button a unique I'd. Something like button-## where ## here is a different number each time you create a new button. You can then do:

    $(document).on('click', '#button-##', function() {
           .....
     });

Again replacing ## with the corresponding Id value.

Edit: actually you can use the answer @Laif posted by rather than using the $(document).on( call just simply do b.click()

Thank you. for your help – Hagga Nagga Jan 09 '20 at 23:14 — Hagga Nagga, Jan 09 '20 at 23:14

How to refer on dynamically created variables

3 Answers3