Question

我的页面上有一个按钮，允许用户添加表单。单击新表单中的按钮时，应该运行一个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不会注册它被单击并且没有消息打印到控制台。您知道如何解决此问题吗？

谢谢！

Answer 1

我需要使用

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

而不是

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

Answer 2

在DOM加载后添加了新按钮，因此未在DOM中注册且未获得点击。使用以下代码进行动态元素点击。

<div class="col-md-6 col-md-offset-3">
     <div id="chartReport">
         <canvas id="myChart"></canvas>
     </div>
</div>

无法在附加的div上运行jquery

2 个答案: