javascript-单击不是函数错误

我正在创建一个确认框，用户将单击“删除”，然后询问他们是否确定

这是html

    <a href="" class="delete"  >Delete</a>

如何修复此错误？

像这样使用它

<a href="" onclick="popup()" class="delete"  >Delete</a>

---

您正在调用

。在
（function（）{}）
上单击
，但在
$（文档）中单击函数声明。在（'click'，'#deleteproduct'，（function（）{…}）上
不会通过函数单击返回任何内容。相反，您可以制作如下内容，当单击
删除产品时添加html，并使用jQuery将单击事件添加到html中


var deleteBox='确定要删除吗？
取消是'；
$（“#删除产品”）。单击（函数（）{
var$result=$（“#result”）；
var$popup=$（“#popup”）；
$result.text（“”）；
$popup.append（deleteBox）；
$popup.find（'.cancel'）。单击（函数（）{
$popup.html（“”）；
$result.text（“已取消”）；
});
$popup.find（'.confirm'）。单击（函数（）{
$popup.html（“”）；
$result.text（“已确认”）；
});
})；

删除产品
问题在于，您试图将
单击
处理程序添加到
.on（）
的结果中，这显然是不受支持的。如果要将处理程序添加到
删除框
，则需要

deleteBox.click(function() {/*Do something*/});

编辑：

这就是如何应用该想法：

  (function($){
                  var deleteBox = '<span class="deleteBox"><p>Are you sure you want to delete?</p><span class="cancel">Cancel</span><span class="confirm">Yes</span></span>';
                  $(document).on('click', '#deleteproduct', (function(){
                    $(this).append(deleteBox);
                  }));
                  $(deleteBox).click(function(){
                    if(!$(this).hasClass('selected')){
                      $(this).addClass('selected');
                      var owner = $(this);

                      $(this).find('.cancel').unbind('click').bind('click',function(){
                        owner.removeClass('selected');
                        return false;
                      })

                      $(this).find('.confirm').unbind('click').bind('click',function(){
                        $(this).parent().addClass('loading');
                        var parent = $(this).parent();

                        //ajax to delete

                        setTimeout(function(){ //On success
                          parent.addClass('deleted');
                          setTimeout(function(){
                            owner.fadeOut(600);

                            //remove item deleted

                            setTimeout(function(){
                              owner.find('.deleted').removeClass('loading').removeClass('deleted');
                              owner.removeClass('selected');
                              owner.show();
                            },1000) 
                          },1000)
                        },1000)

                        return false;
                      })
                    }   
                    return false;
                  });
          })(jQuery);

（函数（$）{
var deleteBox='是否确实要删除？
CancelYes'；
$（文档）。在（'单击'，'删除产品'，（函数（）上）{
$（this）.append（deleteBox）；
}));
$（删除框）。单击（函数（）{
if（！$（this）.hasClass（'selected'））{
$（this.addClass（'selected'）；
var owner=$（此值）；
$（this）.find（'.cancel'）.unbind（'click'）.bind（'click'，function（））{
owner.removeClass（'selected'）；
返回false；
})
$（this）.find（'.confirm'）.unbind（'click'）.bind（'click'，function（））{
$（this.parent（）.addClass（'loading'）；
var parent=$（this.parent（）；
//要删除的ajax
setTimeout（函数（）{//成功时）
parent.addClass（“已删除”）；
setTimeout（函数（）{
所有者。淡出（600）；
//删除已删除的项目
setTimeout（函数（）{
owner.find（'.deleted'）.removeClass（'loading'）.removeClass（'deleted'）；
owner.removeClass（'selected'）；
owner.show（）；
},1000) 
},1000)
},1000)
返回false；
})
}   
返回false；
});
})（jQuery）；
为什么要使用unbind（'click'）？只需使用.onclick=function（）；@artgb可能是因为jQuery没有
onclick
属性？有什么解释为什么会被否决吗？@Ola，请将您认为对您最有帮助的答案向上投票。那么我应该删除什么来添加它？我应该如何在code@Ola如果你不能将这个想法应用到你的代码中，那么我想恳请你要创建一个JSFIDLE，我将在其中为您解决此问题。@Ola谢谢，我已将jQuery作为一个资源添加到其中：@Ola我已编辑了我的答案，出于某种原因，如果您单击“运行”按钮，脚本只能在小提琴中工作。但它可以工作
function popup(){
   //do your stuff here

}

deleteBox.click(function() {/*Do something*/});

  (function($){
                  var deleteBox = '<span class="deleteBox"><p>Are you sure you want to delete?</p><span class="cancel">Cancel</span><span class="confirm">Yes</span></span>';
                  $(document).on('click', '#deleteproduct', (function(){
                    $(this).append(deleteBox);
                  }));
                  $(deleteBox).click(function(){
                    if(!$(this).hasClass('selected')){
                      $(this).addClass('selected');
                      var owner = $(this);

                      $(this).find('.cancel').unbind('click').bind('click',function(){
                        owner.removeClass('selected');
                        return false;
                      })

                      $(this).find('.confirm').unbind('click').bind('click',function(){
                        $(this).parent().addClass('loading');
                        var parent = $(this).parent();

                        //ajax to delete

                        setTimeout(function(){ //On success
                          parent.addClass('deleted');
                          setTimeout(function(){
                            owner.fadeOut(600);

                            //remove item deleted

                            setTimeout(function(){
                              owner.find('.deleted').removeClass('loading').removeClass('deleted');
                              owner.removeClass('selected');
                              owner.show();
                            },1000) 
                          },1000)
                        },1000)

                        return false;
                      })
                    }   
                    return false;
                  });
          })(jQuery);