如何为所有动态生成的 div 添加常用的 Javascript 函数？ [复制]

Posted 2023-02-24

【中文标题】如何为所有动态生成的 div 添加常用的 Javascript 函数？ [复制]

【英文标题】：How to add common Java Script function to all div generated dynamically? [duplicate]

【发布时间】：2015-07-19 09:06:17

【问题描述】：

如何将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="bucketforloop.counter0">
             row.render 
        </div>
        % empty %                             
             table.get_empty_message 
            % endfor %
    </section>

所有的分割都会分开工作。请看下图，如果我点击1st div上的hidecontent，那么它会隐藏1st div其他会隐藏，如果我点击 2nd div 然后它将隐藏 2nd div，其他 div 不会隐藏。

【问题讨论】：

delegate() 函数或使用 $("document.body").on("div.bucket","click", function()) 应该适合你。 "click"可以替换成你想要的事件

你的意思是$("#grid_content").on("click","div.bucket", function())

@Sanchit，但是所有的潜水都是分开工作的..

你是如何设法忽略所有在你写这个问题时提出的建议的？

在 body 元素上绑定代理不是好习惯。

【参考方案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 元素。

【讨论】：

但是所有部门都不同，希望 JavaScript 函数单独工作。