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处理程序添加到的.on()结果，这显然是不支持的。如果您想将处理程序添加到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 2

使用这样

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

和你的JS代码就会像

function popup(){ 
    //do your stuff here 

} 

Answer 3

您正在呼吁(function(){}).click，但功能声明中$(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>