如何将带有 JavaScript 的 EventListeners 添加到服务器 returns 的不同数量的元素

Question

如何将带有 JQuery/JavaScript 的 EventListeners 添加到服务器 returns 的不同数量的元素？

服务器使用 Mustache-Template 引擎生成元素：

...
{{#resource.recordEntries}}
<form action="http://x/{{entryId}}/" method="post">
    <textarea id="inputArea{{entryId}}" class="inputArea">{{description}}</textarea>
    <button id="saveEntry{{entryId}}" class="saveEntry" type="submit">Save</button>
</form>
{{/resource.recordEntries}}
...

例如这里 returns 2 个文本区域和 2 个按钮：

<textarea id="inputArea1" class="inputArea">Desciription Area1</textarea>
<button id="saveEntry1" class="saveEntry" type="submit">Save Area1</button>

<textarea id="inputArea2" class="inputArea">Desciription Area2</textarea>
<button id="saveEntry2" class="saveEntry" type="submit">Save Area2</button>

关键部分是EventListener 的注册。我可以对每个元素以这样的静态方式进行，但我不知道服务器有多少个元素 returns:

$("button[id=saveEntry1]").css({"display": "none"});
document.getElementById("inputArea1").addEventListener("input", function() {
    $("button[id=saveEntry1]").css({"display": "block"});
}, false);
document.getElementById("saveEntry1").addEventListener('click', function() {
  $("button[id=saveEntry1]").css({"display": "none"});  
}, false);

在这个 code example 中，我以静态方式将 EventListeners 注册到 3 个文本区域和按钮。需要进行哪些更改才能使代码更动态地工作？这样即使服务器 returns 超过 3 个元素它仍然有效。

非常感谢！ -martin.martin

Answer 1

您可以使用 classes 并将事件绑定到具有 class 的所有元素。然后使用 $(this).

对按下的元素进行更改

像这样：

$(document).ready(function () {
// Add listener for first textarea and button  
    $(".saveEntry").hide();
    $(".inputArea").on("input", function() {
     $(this).next(".saveEntry").show();
    })
    $(".saveEntry").on("click", function () {
     $(this).hide();
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<textarea id="inputArea1" class="inputArea">Desciription Area1</textarea>
<button id="saveEntry1" class="saveEntry" type="submit">Save Area1</button>

<textarea id="inputArea2" class="inputArea">Desciription Area2</textarea>
<button id="saveEntry2" class="saveEntry" type="submit">Save Area2</button>

<textarea id="inputArea3" class="inputArea">Desciription Area3</textarea>
<button id="saveEntry3" class="saveEntry" type="submit">Save Area3</button>

<p> The number of textareas and buttons varies, depending on what the server returns. How can i register the listeners dynamically to all generated elements?</p>

如何将带有 JavaScript 的 EventListeners 添加到服务器 returns 的不同数量的元素

How to add EventListeners with JavaScript, to a varying number of elements the server returns

html

javascript

jquery

dynamic

listener