Как обращаться к динамически создаваемым переменным - PullRequest
Новая
       1

Как обращаться к динамически создаваемым переменным

0 голосов
/ 10 января 2020

Я хочу знать, можно ли ссылаться на динамически создаваемые переменные, и если да, то как?

Я создаю на этом сайте много форм, у которых p элементов внизу - это одна кнопка, и если я нажимаю эту кнопку я хочу передать переменной (IdJB), которая была создана, указав c в этой форме. Я пометил переменную с помощью команды в коде. 

$(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>

Так выглядит программа

Ответы [ 3 ]

1 голос
/ 10 января 2020

Не используйте глобальную переменную. Поместите IdJB в атрибут кнопки. Для этого вы можете использовать метод jQuery .data().

Кроме того, не добавляйте обработчик событий каждый раз через l oop. Когда вы используете делегирование событий, вам нужно просто добавить обработчик один раз. 

$(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>
0 голосов
/ 10 января 2020

Таким образом, похоже, что когда вы динамически добавляете событие нажатия кнопки, вы добавляете его ко всем кнопкам на странице. Вот почему, когда вы нажимаете один, он запускается 3 раза.

Это видно по тексту button в этой строке кода: 

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

Для решения этой проблемы вам необходимо: сделать прослушиватель кликов, указывающий c на кнопку. Вы можете сделать это, сделав более конкретный c селектор кнопки. Хотя это не идеальное решение, один из способов сделать это - дать каждой кнопке уникальный код. Что-то вроде button-##, где ## - это другое число каждый раз, когда вы создаете новую кнопку. Затем вы можете сделать: 

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

Снова заменив ## на соответствующее значение Id.

Редактировать: на самом деле вы можете использовать ответ @Laif, отправленный вместо вызова $(document).on(, просто сделайте b.click()

0 голосов
/ 10 января 2020

Возможно, я неправильно понимаю ваш вопрос, но если нет: для ссылки на динамически созданные элементы необходимо просто создать экземпляр обработчика кликов после того, как элемент создан и помещен в DOM. Простой способ справиться с этим - с помощью функции сгенерировать ваш тег следующим образом: 

function appendTag(parent, child){
  parent.append(child)
  child.click(function(){
    //Click code here
  });
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...