jquery - ajax响应后，js在div内不起作用

Question

当我使用 ajax 响应 html 填充 div 时，我的 js 无法使用该 div。下面我展示了 html 和 ajax 函数。

JS

$(document).ready(function() {
    $('.submit').on('click', function(){
        var id      = (typeof $(this).attr('id') === 'undefined') ? "" : $(this).attr('id');
        var color   = (typeof $("#"+ id + " #userColor").val() === 'undefined') ? "" : $("#"+ id + " #userColor").val() ;
        var size    = (typeof $("#"+ id + " #userSize").val() === 'undefined') ? "" : $("#"+ id + " #userSize").val();
        var qty     = (typeof $("#"+ id + " #userQuantity").val() === 'undefined') ? "" : $("#"+ id + " #userQuantity").val();
    
        $('#demo-header').load(baseUrlForExternalJS.baseUrl + "cart/add_cart", {'id':id,'color':color,'size':size,'qty':qty}, function () {
            $('#mask , .cart-popup').fadeOut(300 , function() {
                    $('#mask').remove();  
                });
        });

    });
});

HTML

<div id="demo-header">
                    <a id="cart-link" href="#cart" title="Cart"><?php echo $this->cart->total_items(). "  Items - $".$this->cart->total(); ?></a>
                    <div id="cart-panel">
                        <div class="item-cart">
                        <table>
                          <tbody>
                            <tr>
                              <td class="image"><a href="product.html"><img width="60" height="60" src="<?php echo base_url(); ?>resources/images/products/product-thumb-1.jpg" alt="product" title="product"></a></td>
                              <td class="name"><a href="product.html">Women's Saucony</a></td>
                              <td class="quantity">x&nbsp;1</td>
                              <td class="total">$59.95</td>
                              <td class="remove"><i class="icon-remove"></i></td>
                            </tr>
                          </tbody>
                        </table>
                    </div>
                    </div><!-- /login-panel -->

在我用响应替换 HTML 后，我的链接将不起作用。

Answer 1

替换这个：

$('.submit').on('click', function(){

有了这个：

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

Answer 2

您需要将任何侦听器附加到非动态代码段。动态生成的代码没有与之关联的侦听器。

例子

$('#demo-header').on('click','.submit',function() {
        var id      = (typeof $(this).attr('id') === 'undefined') ? "" : $(this).attr('id');
        var color   = (typeof $("#"+ id + " #userColor").val() === 'undefined') ? "" : $("#"+ id + " #userColor").val() ;
        var size    = (typeof $("#"+ id + " #userSize").val() === 'undefined') ? "" : $("#"+ id + " #userSize").val();
        var qty     = (typeof $("#"+ id + " #userQuantity").val() === 'undefined') ? "" : $("#"+ id + " #userQuantity").val();
});