javascript - click is not a function error

Question

i am creating a confirmation box where users will click delete and it will ask then if they are sure or not.

this is the html

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

this is the JS handler

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

this is the error its showing

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

how can I fix this error?

Answer 1

You are calling .click on (function(){}), but the function-declaration in $(document).on('click', '#deleteproduct', (function(){...}) doesn't return anything with a function click. Instead, you could make something like the following, which adds the html when Delete product is clicked and uses jQuery to add click-events to the 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>