Question

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

服务器使用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}}
...

例如，它返回2个textareas和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>

关键部分是EventListeners的注册。我可以以静态的方式为每个元素执行此操作，但我不知道服务器返回了多少元素：

$("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个textareas和按钮。需要进行哪些更改，代码的工作更加动态？因此，即使服务器返回的元素超过3个，它仍然有效。

非常感谢！ -martin.martin

Answer 1

您可以使用这些类并将事件绑定到该类的所有元素。然后使用$(this)对已按下的元素进行更改。

像这样：

＆＃13;

$(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();
    })
});

＆＃13;

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

＆＃13;

如何使用JavaScript将EventListeners添加到服务器返回的不同数量的元素

1 个答案: