Question

我有一个网站，用户可以在其中选择一个项目，然后显示详细信息，包括数量。我还在div中包含了一个按钮，这样当点击时，它应该将数量减少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);
});

我输入了一条警告消息，看看该按钮是否正常工作，但是当我点击btnRemove1按钮时，没有任何反应。

Answer 1

由于该按钮是动态添加的，您可以尝试：

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

Answer 2

您可以将事件绑定到文档（jQuery在弃用之前曾经做过的事情）

现在是：

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

或者您可以在将＃btnRemove1添加到Dom后重新绑定事件。

Answer 3

最有可能的是，在尝试将click事件附加到DOM之前，“删除”按钮不在DOM中。很难从代码片段中看出来，但如果“购买”按钮操作未成功完成，则“删除”将不存在。

当您将click事件附加到Remove时，请尝试控制台记录$（“＃btnRemove1”）。length以查看它是否存在，或使用断点。

对代码的改进是缓存在变量$（“＃dropbox”）中，然后在其中查找按钮，如：

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

你应该使用.on（）而不是弃用的.click（）。

Answer 4

在创建删除按钮

后，尝试将删除按钮单击处理程序添加

///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

这是因为稍后（动态地）添加了按钮。你必须使用代表。

您不必为此使用身体。任何非动态插入的元素都是＃btnRemove1的父元素。

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

原因是您在页面上存在元素＃btnRemove1之前绑定事件。因此没有什么可以将事件绑定到。然而，body元素将出现在页面上，并将您的事件委托给＃btnRemove1 。

Answer 6

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

在DIV区域使用AJAX加载数据时不起作用就像

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

javascript按钮单击功能无法正常工作

6 个答案: