jQueryバインドがクリックで機能しない

Question

私は奇妙な問題を抱えています。最初のものだけが動作します。両方ともjQuery（document）.ready（function（）{}）に記述する必要があります。 コンソールにエラーはありません。

この1は、この1つは、私はそれがどんな意味がありません知っている。これは完全な例である

jQuery('body').on('click', '.delete_product_line', function(){ console.log('ccccc');}); 

動作しない

jQuery('.delete_product_line').click(function(){ 
      console.log('xxxxx2'); 
}); 

の作品、また#submitAddProductは、それが必要として動作します。

jQuery(document).ready(function(){ 



jQuery('body').on('click', '#submitAddProduct', function(){ 


    var interval; 

    var product_id = jQuery('#add_product_product_id').val(); 
    var price_tax_excl = jQuery('#add_product_product_price_tax_excl').val(); 
    var price_tax_incl = jQuery('#add_product_product_price_tax_incl').val(); 
    var qty = jQuery('#add_product_product_quantity').val(); 
    var id_combination = 0; 

    var initial_rows = jQuery('#orderProducts tbody tr').length; 
    var i = 0; 
    var rows = 0; 

    console.log(initial_rows); 
    if(jQuery('#add_product_product_attribute_id').length > 0) 
     id_combination = jQuery('#add_product_product_attribute_id').val(); 

    interval = setInterval(function(){ 

     if(i >= 5000) 
     { 

      clearInterval(interval); 
      interval = 0; 

     } 
     else 
     { 
      rows = jQuery('#orderProducts tbody tr').length; 

      if(rows > initial_rows) 
      { 

       i = 10000; 
       var response_z = $.ajax({ type: "POST", 
          url: aem_ajax, 
          cache: false, 
          data: { action: 'add_product_to_order', id_product: product_id, price_tax_excl: price_tax_excl, price_tax_incl:price_tax_incl, qty:qty, id_combination: id_combination, id_order: aem_id_order, id_employee: aem_id_employee, token: aem_token }, 
          async: true, 
          success: function(data) { 


          } 

          }).responseText; 



      } 


     } 




     i = i + 100; 
    }, 100); 

    return false; 
}); 



jQuery('.delete_product_line').click(function(){ 
      console.log('xxxxx2'); 
}); 

jQuery(document).on('click', '.delete_product_line', function(){ 


    console.log('xxxxx'); 
    var parent = jQuery(this).closest('tr'); 
    var id_order_detail = parent.find('.edit_product_id_order_detail').val(); 

    var price_tax_excl = parent.find('.edit_product_price_tax_excl').val(); 
    var price_tax_incl = parent.find('.edit_product_price_tax_incl').val(); 
    var qty = parent.find('.edit_product_quantity').val(); 
    var id_combination = 0; 

    var link = 'https://mytestsite.com/'+parent.find('a:eq(0)').attr('href'); 
    var url = new URL(link); 
    var id_product = url.searchParams.get("id_product"); 

    var response_z = $.ajax({ type: "POST", 
       url: aem_ajax, 
       cache: false, 
       data: { action: 'remove_product_from_order', id_order_detail: id_order_detail, id_order: aem_id_order, id_product: id_product, id_employee: aem_id_employee,qty: qty, price_tax_excl:price_tax_excl, price_tax_incl:price_tax_incl, token: aem_token }, 
       async: true, 
       success: function(data) { 


       } 

       }).responseText; 

    return false; 
}); 

}）;

Answer 1

この場合、'body'の代わりにdocumentを使用してください。

jQuery(document).ready(function() { 
    jQuery(document).on('click', '.delete_product_line', function(){ 
     console.log('ccccc'); 
    }); 
})