Button declared in Jquery issue

Question

I am trying to develop a shopping cart and i am stuck with the following issue. i am creating a new product dynamically using jQuery. The following piece of code adds new product to the cart:

        var productAdded = $('<tr class="product" data-id_modal="'+ id +'"><td class="product_name2"><button href="#0" class="button2" id="'+ id +'">' + product_name + '</button></td><td class="quantity"><span class="select"><select id="cd-product-'+ id +'" name="quantity"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select></span></td><td class="price">' + product_price + '</td><td><a href="#0" class="delete-item"><i class="fa fa-trash-o fa-2x" aria-hidden="true"></i></a></td></tr>');
    cartList.prepend(productAdded);

As you can see above i am creating a new 'button' within javascript. For that element click event is not firing.

$(".button2").click(function(e) {
                    e.preventDefault();

                    $("#add_product_comment").dialog({
                      buttons : {
                          "Άκυρο" : function() {
                          $(this).dialog("close");
                        },
                        "Αποθήκευση" : function() {
                          setInterval(function(){}, 1000); 
                          $( "#add_product_comment" ).dialog( "close" );
                          // $('#two').load(document.URL +  ' #two'); using ajax reload div                           
                        }
                      }
                    });

                    $("#add_product_comment").dialog("open");
                    $('.ui-widget-overlay').css('background', '#000000');

                  });

Any help will be really appreciated.

Sarath Kumar · Accepted Answer · 2016-11-12T19:25:52.803

1

Use on click instead.

$(document).on('click','.button2',function(){
    //your action.
});

edited Nov 12 '16 at 19:25

answered Nov 12 '16 at 19:19

Sarath Kumar

988
13
34

this event is wrapped with in the document ready function. – A.A. PEACE Nov 12 '16 at 19:23
That's not the problem.Try this. – Sarath Kumar Nov 12 '16 at 19:24
ok give me 2mins.. thanks friend – A.A. PEACE Nov 12 '16 at 19:26
If there is any problem tell me. – Sarath Kumar Nov 12 '16 at 19:28
Error: Syntax error, unrecognized expression: ..button2 – A.A. PEACE Nov 12 '16 at 19:28
There is two `..` marks before the button change it. – Sarath Kumar Nov 12 '16 at 19:29
:) i saw it and changed it but still i get no response... – A.A. PEACE Nov 12 '16 at 19:32
I think you are getting error because of other problems. Could you share your code on jsbin or jsfiddle?? – Sarath Kumar Nov 12 '16 at 19:34
Yes i will bro , later thank you very much for your support – A.A. PEACE Nov 12 '16 at 19:36
1

Refer this [link]http://jsbin.com/mitecogusu/edit?js,output – Sarath Kumar Nov 12 '16 at 19:38
Thank you for the solution. it worked. but i do not understand the reason. what is the difference between the two event triggers? $(document).on('click','.button2',function(){ //$(".button2").click(function(e) { – A.A. PEACE Nov 14 '16 at 08:26
Dear Sarath, just one more question in case you might be able to help out. For each new row append to the cart i add a modal just as you stated in your code. For each modal i append a form for adding a comment onto each record(tr). however when i set the value to a single row using an input field this value is automatically asigned to all rows listed in the cart. Any idea on this? Thanks !! – A.A. PEACE Nov 14 '16 at 09:51
yeah it'll change for all the row because modal is common for all. but the comment is different. So when ever the customer enters comment you can just save it in data [attribute] and data base. When he clicking the product again fetch the comment from data or database using ajax. – Sarath Kumar Nov 14 '16 at 15:10
1

check this http://jsbin.com/fisuluwewo/edit?js,output – Sarath Kumar Nov 14 '16 at 16:11
The inner button "iphone" does not work for each. – A.A. PEACE Nov 14 '16 at 18:51
You mean modal title ?? I couldn't understand. – Sarath Kumar Nov 14 '16 at 19:26
According to your example When i add a new row then.i try to click on "iphone" button but nothing hapens. I think is because i viewing from my handset. I will try it tommrow on my pc. Thanks friend – A.A. PEACE Nov 14 '16 at 19:42
try it in your pc. Reply back. – Sarath Kumar Nov 14 '16 at 19:45
You are my guru :) Thank you v much Sarath!!!!!!! – A.A. PEACE Nov 15 '16 at 06:58

Button declared in Jquery issue

1 Answers1