Question

私はユーザーが削除をクリックする確認ボックスを作成しています。

このHTML

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

が、これは

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

JSハンドラですこれはエラーのが、私はこのエラーを修正する方法を

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

を示しているのですか？

Answer 1

問題は、あなたが明らかにサポートされていない、.on()の結果にclickハンドラを追加しようということです。

(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 2

この

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

のようにそれを使用して、あなたのJSコードは、あなたが(function(){})に.clickを呼び出しているが、$(document).on('click', '#deleteproduct', (function(){...})内の関数宣言をして、何も返さない

function popup(){ 
    //do your stuff here 

} 

Answer 3

のようになります機能をクリックします。代わりに、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>