javascript javascript按钮单击功能不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15665656/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript button click function not working
提问by littledevils326
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.
我有一个网站，用户可以在其中选择一个项目，然后显示详细信息，包括数量。我还在 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);
});
I put in an alert message to see if the button is working properly, but when I click the btnRemove1 button, nothing happens.
我输入了一条警报消息以查看按钮是否正常工作，但是当我单击 btnRemove1 按钮时，没有任何反应。
回答by tymeJV
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.
});
回答by MikeHall
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.
最有可能的是，在您尝试将点击事件附加到它之前，您的删除按钮不在 DOM 中。很难从您的代码片段中看出，但如果 Buy 按钮操作未成功完成，则 Remove 将不存在。
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.
在将单击事件附加到 Remove 时，尝试控制台记录 $("#btnRemove1").length 以查看它是否存在，或使用断点。
An improvement to your code would be to cache in a variable $("#dropbox") and then look for your buttons within it, as in:
对您的代码的改进是缓存在变量 $("#dropbox") 中，然后在其中查找您的按钮，如下所示：
var $dropBoxNode = $("#dropbox");
$dropBoxNode.find("#btnRemove1");
And you should use .on() instead of the deprecated .click().
您应该使用 .on() 而不是已弃用的 .click()。
回答by Garrett
You can either tie the event to the document (what jQuery live used to do before it was deprecated)
您可以将事件绑定到文档（jQuery live 在它被弃用之前用来做什么）
now it is:
现在它是：
$(document).on("click", "#btnRemove1", function(){})
or you can rebind the event after #btnRemove1 is added to the Dom.
或者您可以在将#btnRemove1 添加到 Dom 后重新绑定事件。
回答by Peter Rasmussen
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。任何作为 #btnRemove1 父元素的非动态插入元素都可以。
$('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.
原因是您在页面上出现元素 #btnRemove1 之前绑定了事件。因此没有什么可以绑定事件。然而， body 元素 - 将出现在页面上并将您的事件委托给#btnRemove1。
回答by Nate
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
回答by Monzur
$('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
在 DIV 区域上使用 AJAX 加载数据时不起作用
<a href="javascript:;;" class="edit">EDIT</a>
