JavaScript按钮点击功能不起作用。

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按钮时，没有任何反应。

- littledevils326

---

你的HTML代码在哪里？你正在使用哪个版本的jQuery？ - Dave Hogan

你应该在这里传递一个字符串吧？alert(remove); - Jean Lourenço

你能添加创建btnRemove1的代码吗？而且btnBuy1的点击功能是否按预期工作？ - FloatingCoder

@FloatingCoder：按钮是添加在$("#dropbox").html部分的。 - tymeJV

@FloatingCoder 是的，buyBtn1 有效，并且我可以在下拉框中看到详细信息。 - littledevils326

Answer 1

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

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

- tymeJV

Answer 2

这是因为按钮是后来添加的（动态添加的）。你需要使用代理。

您不必为此使用body。作为#btnRemove1父级的任何非动态插入的元素都可以。

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

原因是您在元素#btnRemove1出现之前绑定了事件。因此，没有任何内容可以绑定该事件。然而，body元素会存在于页面上，并将事件委托给#btnRemove1。

- Peter Rasmussen

Answer 3

很可能在尝试将点击事件附加到删除按钮之前，该按钮并未在DOM中出现。从您的代码片段中很难判断，但如果购买按钮操作没有成功完成，则删除按钮将不存在。

在将点击事件附加到删除按钮时，请尝试使用console.log（$（“＃btnRemove1”）。length）来查看它是否存在，或者使用断点。

改进您的代码的一种方法是缓存变量$（“#dropbox”），然后在其中查找您的按钮，例如：

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

你应该使用 .on() 而不是已弃用的 .click()。

- MikeHall

Answer 4

你可以将事件绑定到文档上（这是 jQuery live 被弃用之前所做的事情）

现在它是：

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

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

- Garrett

Answer 5

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

当使用AJAX在DIV区域加载数据时，无法正常工作 就像这样

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

- Monzur

Answer 6

尝试在创建删除按钮后添加删除按钮点击处理程序。

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

- Nate