javascript - 从通过 ajax 检索的 div 内部执行 javascript

Question

我有下面的代码，我希望访问 div 内的一堆动态表单。如果我将表单移到与 javascript 相同的页面上，该怎么办？它工作正常，但是当通过 ajax 向 div 请求页面时，表单不会访问 javascript

    <script>
        $(function() {
            $('form.frm_details').on('submit', function(event) {
                event.preventDefault();
                $.ajax({
                    url: '/limitless/functions2.php',
                    type: 'post',
                    dataType: 'json',                       
                    data: $(this).serialize(),
                      success: function(data) {
                           if(data.status == '1')
                            {
                                $('#info').addClass('alert alert-danger no-border').html(data.message);
                            } 
                           if(data.status == '2')
                            {
                                $('#info').addClass('alert alert-danger no-border').html(data.message);
                            }                               
                        }  
                });
            });
        });
    </script>

    <script>
    function webapp_get_customers(xy){
       $.ajax({
       type: 'GET',
       url: '/limitless/SWAG',
       dataType: 'html'
      }).done(function( data ) {
      $('#webapp_get_customers').html(data);
      });
    }   
    webapp_get_customers();
    </script>       


    <div id='webapp_get_customers'></div>   

Answer 1

当你有这样的东西时，你基本上会在页面首次加载时将事件监听器附加到 DOM 中的每个 form.frm_details :

$('form.frm_details').on('submit', function(event) {
    ...
});

问题是当您加载新的 form.frm_details 元素时，它们不会附加此事件。解决此问题的一种方法是为父元素提供事件处理程序，例如 body。考虑这样的事情:

$('body').on('submit', 'form.frm_details', function(event) {
    ...
});