动态潜水元素vs隐藏

Question

我有几个相关的问题。我的任务是开发一个页面来生成民意调查问题。创建民意调查时，我需要一次添加一个新答案(而不是有10个选项，民意调查创建者只有两个选项)。每个答案都是一个包含多个元素(如文本、图像)的div。当输入一个问题的答案时，下一个div就会出现(所以不需要一个写着"添加问题"的按钮)

1. 加载最大数量的可能选项，并将它们全部隐藏(第一个除外)，并根据需要取消隐藏。)我想这是在装载可能不会使用的东西——但这真的有什么大不了的吗
2. JQuery并动态创建字段。我想效率更高，但令人痛苦的是，如果浏览器返回但被使用，它们在返回页面时就会消失——这可能是罕见的情况
3. 使用AJAX加载每个新问题。如果由于DB调用导致新问题加载缓慢，那么响应性似乎很危险

除了上面针对这种情况的"最佳实践"之外，我还有一个问题，假设我选择#2。

我创建了jsfiddle来了解如何做到这一点https://jsfiddle.net/msith718/uf9qfm53/21/

var nlst="<li>Appended item<button class="up">up</button></li>"
$("#myList").append(nlst);

我知道我可以使用克隆，但除了添加/删除问题外，我还需要将它们向上向下移动，为了让它发挥作用，我简直疯了。使用list.append很简单。由于每个包含问题的div都是相同的，所以我可以写出整个div的代码并进行附加。事实上，我有点喜欢它的可读性

但是，当创建新的列表项时，向上/向下按钮不起作用。我认为这是因为"up"类由于引号而没有正确加载。我试着逃避引用，但似乎无法让它发挥作用。

那么，有人能帮助我了解添加新问题的最佳方式吗？如果是JQuery风格，我该如何让生成的按钮工作？谢谢

Answer 1

您必须使用.on方法。它将事件绑定到所有项目(甚至是后来创建的项目——它侦听它们)。

所以不是

$('.someClass').click(function(){});

使用

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

这是一把小提琴：https://jsfiddle.net/7ukys71m/