在ajax响应之后，js在div内部没有工作

Question

当我使用ajax响应html填充div时，我的js没有使用它。下面我展示了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();
});