JavaScript-单击不是函数错误

Question

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

这是HTML

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

这是JS处理程序

        (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);
              }).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);

这是它显示的错误

   TypeError: (intermediate value).click is not a function at this line   ......  }).click(function(){

如何解决此错误？

Answer 1

您正在调用.click在(function(){}) ，但是$(document).on('click', '#deleteproduct', (function(){...})函数声明不返回只需单击一下功能，您就可以进行如下操作，在单击“ Delete product时添加html，并使用jQuery向html添加点击事件。

 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>'; $('#deleteproduct').click(function() { var $result = $('#result'); var $popup = $('#popup'); $result.text(""); $popup.append(deleteBox); $popup.find('.cancel').click(function () { $popup.html(""); $result.text("Cancelled"); }); $popup.find('.confirm').click(function () { $popup.html(""); $result.text("Confirmed"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="deleteproduct">Delete product</button> <div id="popup"></div> <div id="result"></div> 

Answer 2

问题是您试图向.on()的结果中添加click处理程序，这显然不受支持。 如果要将处理程序添加到deleteBox ，则需要

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);

Answer 3

这样使用

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

和你的js代码会像

function popup(){
   //do your stuff here

}