Jquery單擊事件與彈出

我有以下代碼，其工作不正常，基本上我願意添加彈出窗口上我的點擊事件確認刪除，但當我點擊刪除行，然後apppear彈出，我卡住和coudn 「不懂怎麼回事，這裏是我的代碼Jquery單擊事件與彈出

$.fn.matrix.deleteCategory = function (jqObj) { 

    jqObj.find("#award").on('click', ".categoryminus", function() { 



     var CategoryClass = $(this).closest('tr').attr('class'); // table row Class 
     //split all class of current table row 
     var CategoryArray = CategoryClass.split(' '); 
     //delete all rows having class like C-1-o-1 
     var categoryClassLike  = '[class^=' + CategoryArray[0] + '-o-]'; 

     //for rTenderDocument,check delete c-2,c-3 and appear popup 
     if (formType == 'rTenderDocument') { 

      if (CategoryArray[0] == 'C-2'){ 

       $('#priceConfirm').bPopup(); 

       $('.priceConfirm').click(function(){ 

        if($(this).attr('id') == 'priceDeleteNo'){ 
         $('#priceConfirm').bPopup().close(); 
         return false; 

        } else { 
         $('#priceConfirm').bPopup().close(); 
         return true; 

        } 
       }); 
      } else if (CategoryArray[0] == 'C-3'){ 

       $('#fixedAnnualConfirm').bPopup(); 

       $('.fixedAnnualConfirm').click(function(){ 

        if($(this).attr('id') == 'fixedAnnualDeleteNo'){ 
         $('#fixedAnnualConfirm').bPopup().close(); 
         return false; 

        } else { 
         $('#fixedAnnualConfirm').bPopup().close(); 
         return true; 

        } 
       }); 
      } 

     } 

     //remove all child of sub category 
     $(categoryClassLike).each(function(){ 

      var obj    = $(this); 

      var subCategoryClass = obj.closest('tr').attr('class'); // table row Class 
      //split all class of current table row 
      var subCategoryArray = subCategoryClass.split(' '); 
      //delete all rows having class like C-1-o-3-So-1 
      var classLike  = '[class^=' + subCategoryArray[0] + '-So-]'; 

      //remove all child of sub category 
      $(classLike).each(function(){ 
       $(this).remove(); 
      }); 

      //remove sub category 
       obj.remove(); 
     }); 

      //after removing child then delete their parent 
      $(this).closest('tr').remove(); 

    }); 

    return jqObj; 
    };

來源

2014-02-15 Muhammad Rashid

我不知道你的代碼做什麼 - 但我再給你一次進場做你想做的（基於表和彈出確認）

看看這個小提琴：JSFiddle Demo

我已經創建了行的基本表包含刪除按鈕：

<table> 
    <tr><td>ID</td><td>NAME</td><td>ACTION</td></tr> 
    <tr> 
     <td><div>1</div></td> 
     <td><div>Booba</div></td> 
     <td><div><button class='del'>Delete</button></div></td> 
    </tr> 
    <tr> 
     <td><div>2</div></td> 
     <td><div>Johnas</div></td> 
     <td><div><button class='del'>Delete</button></div></td> 
    </tr> 
    <tr> 
     <td><div>3</div></td> 
     <td><div>Coolio</div></td> 
     <td><div><button class='del'>Delete</button></div></td> 
    </tr> 
</table>

添加了消息，按鈕的彈出容器，並隱藏它：

<div class='popup' id='popup' style='display:none'> 
    <div> 
     <p>Please confirm the delete action</p> 
     <button id='confirm'>Proceed</button> 
     <button id='cancel'>Cancel</button> 
    </div> 
</div>

現在對於魔術部分〜如你可以看到我正在使用一個變量來存儲行，我希望刪除之前彈出顯示，並只有當「繼續」按鈕被點擊這個元素被刪除（否則變量被重置並彈出刪除）：

$(function(){ 

//element to delete: 
    var ele_del; 

// Expose popup message when del button clicked: 
    $('button.del').click(function(){ 
     event.preventDefault(); 
      $('#popup').fadeIn('slow'); 
      ele_del = $(this).closest('tr'); 
     return false; 
    }); 

//delete if proceed clicked: 
    $('button#confirm').click(function(){ 
     event.preventDefault(); 
      $('#popup').fadeOut('slow',function(){ 
       $(ele_del).find('div').each(function(){ 
        $(this).slideUp('slow',function(){ 
         $(ele_del).remove(); 
         ele_del = ""; 
        }); 
       }); 
      }); 
     return false; 
    }); 

//cancel delete operation: 
    $('button#cancel').click(function(){ 
     event.preventDefault(); 
      $('#popup').fadeOut('slow',function(){ 
       ele_del = ""; 
      }); 
     return false; 
    }); 
});

注：

我使用「格」內的TD的使效果基本show效果跨瀏覽器。一些瀏覽器不會直接滑動TR的。
整個腳本基於效果回調函數 - 如果您不想使用效果，您可以刪除div並直接刪除TR。
如果使用動態表（行正在動態和不添加所有在場的DOM準備好），只要用了「對（‘點擊’」代替。點擊（）我使用。

玩得開心！

來源

2014-02-15 18:53:04

Jquery單擊事件與彈出

回答

相關問題