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?

Why do you use unbind('click')? you can simply use .onclick = function(); — artgb
– artgb, Commented Aug 26, 2017 at 11:51
@artgb maybe because jQuery doesn't have an onclick property? — Rory McCrossan
– Rory McCrossan, Commented Aug 26, 2017 at 11:53
@Ola, Kindly upvote the answer you think helps you the most in your case. — Marylyn Lajato
– Marylyn Lajato, Commented Aug 26, 2017 at 14:00

Marco de Zeeuw · Accepted Answer · 2017-08-26 12:10:45Z

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>

Lajos Arpad · Accepted Answer · 2017-08-26 13:21:15Z

2

The problem is that you try to add a click handler to the result of .on(), which, apparently is not supported. If you want to add the handler to deleteBox, then you need

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

EDIT:

This is how the idea can be applied:

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

edited Aug 26, 2017 at 13:21

answered Aug 26, 2017 at 12:19

Lajos Arpad

80.5k42 gold badges124 silver badges235 bronze badges

4 Comments

Ola Over a year ago

so what should i delete to add that? how should I implement that in the code

Lajos Arpad Over a year ago

@Ola if you cannot apply this idea for your code, then I would like to kindly ask you to create a JSFiddle where I will solve this problem for you.

Lajos Arpad Over a year ago

@Ola thank you, I have added jQuery as a resource to it: jsfiddle.net/wvnjvd2u/1

Lajos Arpad Over a year ago

@Ola I have edited my answer, for some reason the script only works in the Fiddle if you click on the Run button. But it works

Anil Shrestha · Accepted Answer · 2017-08-26 11:56:04Z

0

Use it like this

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

and your js code will be like

function popup(){
   //do your stuff here

}

answered Aug 26, 2017 at 11:56

Anil Shrestha

1,20011 silver badges16 bronze badges

Collectives™ on Stack Overflow

javascript - click is not a function error

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related