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) {
    ...
});

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

1 个答案: