您的 JavaScript 代码仅在页面加载时执行。因此，在您的页面加载后，您的代码将被执行，并告诉它将onclick事件处理程序附加到具有 class 的元素module。在初始页面加载期间，只有 4 个这样的元素。因此事件处理程序将仅附加到这些元素（非常抽象地说）。
现在，当动态添加新元素时，事件不会触发，因为没有与它们绑定的处理程序。
在这种情况下，您应该利用事件委托。您需要将事件处理程序绑定到封闭元素（#main或某些用途body）。
所以你的代码会是这样的：
$('#main').on("click", ".module", function(){
if ($(this).hasClass('flipped')) {
$(this).toggleClass('flipped');
} else {
$('.module').removeClass('flipped');
$(this).toggleClass('flipped');
}
});
因此，事件将仅与静态绑定，#main但当事件发生时，它知道在哪里可以找到目标元素，因为您已将目标指定为.module.
看看这个：
http://api.jquery.com/on/
事件处理程序仅绑定到当前选定的元素；当您的代码调用 .on() 时，它们必须存在于页面上。为确保元素存在并且可以被选择，请在页面 HTML 标记中的元素的文档就绪处理程序内执行事件绑定。如果将新 HTML 注入页面，请在将新 HTML 放入页面后选择元素并附加事件处理程序。或者，使用委托事件来附加事件处理程序，如下所述。
委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要。例如，该元素可以是模型-视图-控制器设计中视图的容器元素，或者如果事件处理程序想要监视文档中的所有冒泡事件，则可以是文档。在加载任何其他 HTML 之前，文档元素在文档的头部是可用的，因此在此处附加事件是安全的，而无需等待文档准备好。
除了能够处理尚未创建的后代元素上的事件之外，委托事件的另一个优点是当必须监视许多元素时，它们的开销可能会大大降低。在其 tbody 中有 1,000 行的数据表上，此示例将处理程序附加到 1,000 个元素：
$( "#dataTable tbody tr" ).on( "click", function() {
alert( $( this ).text() );
});
委托事件方法仅将事件处理程序附加到一个元素，即 tbody，并且事件只需要冒泡一个级别（从单击的 tr 到 tbody）：
$( "#dataTable tbody" ).on( "click", "tr", function() {
alert( $( this ).text() );
});
注意：委托事件不适用于 SVG。