javascript button click function not working

Question

I have a website where user can select an item, the detail is then displayed, including the quantity. I have also included a button inside the div so that when clicked, it should decrease the quantity by 1.

        $("#btnBuy1").click(function()
        {
            if (!sessionStorage['quantity1'])
            {
                sessionStorage['quantity1']=1;

            }
            else
            {
                sessionStorage['quantity1']++;
            }
            $("#dropbox").html('<div id = "1"><img class = "thumb" id = "t1" src="../images/birthday_metoyou.jpg" />' + teddy[1].desc + ", Price £"
             + teddy[1].price + ", Quantity: " + sessionStorage.getItem('quantity1') + "<button id = 'btnRemove1'>Remove</button></div><br/>");
            updateBasket();
            sessionStorage["total1"] = parseInt(sessionStorage.getItem('quantity1')) * teddy[1].price;
            updateSubtotal();
            if (Modernizr.sessionstorage) 
            {  // check if the browser supports sessionStorage
                myids.push(teddy[1].partnum); // add the current username to the myids array
                sessionStorage["ids"]=JSON.stringify(myids); // convert it to a string and put into sessionStorage
            } 
            else 
            {
             // use cookies instead of sessionStorage
            }            
        });

$("#btnRemove1").click(function()
{
   alert(remove);
});

I put in an alert message to see if the button is working properly, but when I click the btnRemove1 button, nothing happens.

Answer 1

Since the button is dynamically added, can you try:

$(document).on('click', '#btnRemove1', function() {
{
   alert("remove"); //I dont know what remove was is the example, added quotes around it.
});

Answer 2

You can either tie the event to the document (what jQuery live used to do before it was deprecated)

now it is:

$(document).on("click", "#btnRemove1", function(){})

or you can rebind the event after #btnRemove1 is added to the Dom.

Answer 3

Most likely, your Remove button isn't in the DOM before you try to attach the click event to it. It is hard to tell from your code snippets, but if the Buy button action hasn't completed successfully, then Remove won't exist.

At the point that you attach the click event to Remove, try console logging $("#btnRemove1").length to see if it exists, or use break points.

An improvement to your code would be to cache in a variable $("#dropbox") and then look for your buttons within it, as in:

var $dropBoxNode = $("#dropbox");
$dropBoxNode.find("#btnRemove1");

And you should use .on() instead of the deprecated .click().

Answer 4

Try putting the remove button click handler addition after you create the remove button

///Code snippit

$("#dropbox").html('<div id = "1"><img class = "thumb" id = "t1" src="../images/birthday_metoyou.jpg" />' + teddy[1].desc + ", Price £"
                     + teddy[1].price + ", Quantity: " + sessionStorage.getItem('quantity1') + "<button id = 'btnRemove1'>Remove</button></div><br/>");

$("#btnRemove1").click(function()
{
     alert(remove);
});

updateBasket();

///Code snippit

Answer 5

That is because the button is added later (dynamicly). You will have to use a delegate.

You don't have to use body for this. Any non dynamicly inserted element that is a parent of #btnRemove1 will do.

$('body').on('click','#btnRemove1',function(){
   alert(remove);
});

The reason is that you bind the event before the element #btnRemove1 is present on your page. Therefore there is nothing to bind the event to. The body element however - will be present on the page and delegate your event to #btnRemove1 .

Answer 6

$('a.edit').on('click','a.edit',function(){
   if (confirm("Are you sure you want to Edit this Photo?"))
   {
    ....
    ....            
   }
});

Not Working When Data is Loading with AJAX on a DIV Area Just Like

<a href="javascript:;;" class="edit">EDIT</a>