<分区>
javascript - 如何为所有动态生成的div添加通用的Javascript函数？
如何给动态生成的所有div添加javascript函数。在_data_grid.html 中，div bucket 是动态生成的，id 为forloop.counter0。我想添加常用的 javascript 函数。比如显示和隐藏部分div。
所有部门都不同，需要 JavaScript 函数单独工作。我将如何做到这一点。
_data_grid.html
<section id="grid_content">
{% for row in rows%}
<div class="bucket" id="bucket{{forloop.counter0}}">
{{ row.render }}
</div>
{% empty %}
{{ table.get_empty_message }}
{% endfor %}
</section>
所有部门将分开工作。请看下图，如果我点击1st div上的hidecontent然后它会隐藏1st div在其他会隐藏，如果我点击2nd div 然后它会隐藏2nd div，没有其他div 会隐藏。
最佳答案
稍后在您的 javascript 中，绑定(bind)一个委托(delegate)。
$(document).ready(function(){
$('#grid_content').on('click', '.bucket', function(){
...whatever logic you need...
});
});
这将在 grid_content 部分内具有“bucket”类的任何 div 上运行。
对于这将做什么似乎有些困惑。声明如果对 div1 采取操作，它应该只影响 div1，对 div2 和 div3 也是如此。
这就是事件的运作方式。如果你点击 div1，它会产生一个点击事件并冒泡到父 #grid_content。使用上面的委托(delegate)，它将检查...这是一个点击事件吗？是的!它是由具有类 bucket 的元素创建的吗？是的!然后我需要对它应用这个函数。
此时，在函数内使用 $(this) 将允许您引用被单击的 div 的各个 dom 元素。
关于javascript - 如何为所有动态生成的div添加通用的Javascript函数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30123994/