Question

我想知道是否可以引用动态创建的变量，如果可以，如何引用？

我在此站点上创建了许多表格，在表格的底部有p个元素，这是一个按钮，如果单击该按钮，我想传输在此表格中特定创建的变量（IdJB）。我在代码中用命令标记了变量。

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

Answer 1

不要使用全局变量。将IdJB放在按钮的属性中。您可以为此使用jQuery .data()方法。

此外，不要每次都在循环中添加事件处理程序。使用事件委托时，只需添加一次处理程序即可。

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

Answer 2

我可能会误解您的问题，但是如果不是这样：为了引用动态创建的元素，只需在创建元素并将其放入DOM之后实例化单击处理程序。一种简单的解决方法是让函数像这样生成标签：

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

Answer 3

因此，当您动态添加按钮单击事件时，您似乎将其添加到页面上的所有按钮。这就是为什么当您单击一次它可以运行3次。

这可以通过以下代码行中的output_arrary=np.array([[e[0], df.iloc[i].tolist().index(e[1])-1] for i, e in enumerate(input_arr)]) print(output_arrary) [[0 0] [1 2] [2 4]]文本看到：

button

要解决此问题，您需要使按钮监听器特定于按钮。您可以通过创建更具体的按钮选择器来实现。尽管这不是一个完美的解决方案，但一种方法是给每个按钮一个唯一的名称。类似于$(document).on('click', 'button', function() { ..... });，每次创建新按钮时，这里的##都是不同的数字。然后，您可以这样做：

button-##

再次用相应的ID值替换##。

编辑：实际上，您只需使用$(document).on('click', '#button-##', function() { ..... });即可使用@Laif发布的答案，而不是使用$(document).on(

如何引用动态创建的变量

3 个答案: