如何将动态生成的所有div添加常见的Java Script函数？

Question

如何将javascript函数添加到动态生成的所有div中。在_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>

所有部门将单独工作。请参阅下图，如果我点击第一个div 上的hidecontent，那么它将隐藏第一个div 在其他会隐藏，如果我点击第二个div 然后它将隐藏第二个div ，没有其他div将隐藏。

Answer 1

稍后在您的javascript中，与代理人绑定。

$(document).ready(function(){
    $('#grid_content').on('click', '.bucket', function(){
        ...whatever logic you need...
    });
});

然后，这将在grid_content部分中具有“bucket”类的任何div上运行。

对于这将会做什么似乎有些混乱。声明如果对div1采取行动，它应该只影响div1，对div2和div3也是如此。

这就是事件的运作方式。如果单击div1，它将生成一个单击事件并冒泡到父#grid_content。使用上面的代表，它将检查...这是一个点击事件吗？是的！它是由带有类桶的元素创建的吗？是的！然后我需要对它应用这个功能。

此时，在函数内使用$（this）将允许您引用被单击的div的各个dom元素。