How to fix onclick Function is not working using JavaScript

Question

Anyone can help me? this is my problem. When I tried to click the button using this function $(".btn_cellophane").on("click",function(){}); I did not get any response or even the error. I guess the onclick function is not working. Here's my code below.

METHOD CALLING

$(".btn_cellophane").on("click",function(){
     alert("Tester true");
         if($(this).hasClass("btn-warning")){
              $(this).removeClass("btn-warning");
              $(this).addClass("btn-success");

              // add_amount_for_cellophane();

         }else if($(this).hasClass("btn-success")){
              $(this).addClass("btn-warning");
              $(this).removeClass("btn-success");

              // add_amount_for_cellophane();
         }
});

CONTENT DISPLAY

var html_cellophane = "";
$.each(data, function(key,product){

        $.each(product.sizes, function(pro_id,variant){

             if(variant.prod_type == 1){
                   var label = (variant.size+" "+variant.unit).toUpperCase();
                   var var_id = variant.variant_id;
                   var price = variant.price;

                       html_cellophane += '<div>'+
                                                '<label>Cellophane ('+price+' pesos)</label>'+
                                           '</div>'+
                                           '<br/>'+
                                           '<div style="width: 100%;">'+
                                                 '<button type="button" class="btn btn-warning btn_cellophane" id="cp_id_btn" data-var_id="'+var_id+'" data-qty="'+1+'" data-price="'+price+'">1</button>'+
                                                 '<button type="button" class="btn btn-warning btn_cellophane" id="cp_id_btn" data-var_id="'+var_id+'" data-qty="'+2+'" data-price="'+price+'">2</button>'+
                                                 '<button type="button" class="btn btn-warning btn_cellophane" id="cp_id_btn" data-var_id="'+var_id+'" data-qty="'+3+'" data-price="'+price+'">3</button>'+
                                                 '<button type="button" class="btn btn-warning btn_cellophane" id="cp_id_btn" data-var_id="'+var_id+'" data-qty="'+4+'" data-price="'+price+'">4</button>'+
                                                 '<button type="button" class="btn btn-warning btn_cellophane" id="cp_id_btn" data-var_id="'+var_id+'" data-qty="'+5+'" data-price="'+price+'">5</button>'+
                                                  '<hr>'+                                        
                                           '</div>';

              }                                     

         });                                                 


});                  

$('.btn_cellophane_div ').html(html_cellophane);

`.btn_cellophane` element does not exist at the time you're attaching the event. jQuery always returns an object, that's why the error isn't fired. — Teemu, Mar 26 '20 at 05:46
https://stackoverflow.com/questions/1359018/how-do-i-attach-events-to-dynamic-html-elements-with-jquery this might help you. — siddiq, Mar 26 '20 at 05:48

score 1 · Accepted Answer · answered Mar 26 '20 at 05:49

You've created the button dynamically. So while you are attaching the event listener the element doesn't exists till then. So you have to use event delegation for working the click event.

Just change your event listener like this-

$(document).on("click",".btn_cellophane", function(){});

How to fix onclick Function is not working using JavaScript

1 Answers1