时间戳

首页 > 解决方案 > 无法在附加的 div 上运行 jquery

javascript - 无法在附加的 div 上运行 jquery

问题描述

我的页面上有一个按钮，允许用户添加表单。单击新表单中的按钮时，应运行 jquery 函数。不幸的是，jquery 函数似乎没有在新添加的 div 上运行（它确实运行在初始页面加载时存在的 div）。

<div id="empty_form" style="display:none">

    <!-- Form Contents --> 

    <div class="deletebox">
        Remove
    </div>
</div>

<div id='add_more'>
    Add Another Form
</div>


<script>
   $('#add_more').click(function() {
       var form_idx = $('#id_form-TOTAL_FORMS').val();                
       $('#form_set').append($('#empty_form').html().replace(/__prefix__/g, form_idx));
    });
</script>

<script>   
    $(".deletebox").click(function () {
        console.log('box was clicked')
    });
</script>

当用户单击新附加表单中的删除框时，什么也没有发生。即 jquery 没有注册它被点击并且没有消息被打印到控制台。你知道如何解决这个问题吗？

谢谢！

标签： javascriptjquery

解决方案

我需要使用

$(document).on('click', '.deletebox', function() {

而不是

 $(".deletebox").click(function () {

推荐阅读