Событие Jquery click со всплывающим окном

Question

У меня есть следующий код, и он не работает должным образом, в основном я готов добавить всплывающее окно в мое событие click для подтверждения удаления, но когда я нажму на удаление строки сначала, а затем apppear popup, я застрял и coudn «т понять, что происходит, вот мой код

$.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; 
    }; 

Answer 1

Я не уверен, что ваш код делает - но я дам вам еще один подхода, чтобы сделать то, что вы хотите (на основе таблиц и всплывающее подтверждения)

Посмотрите на эту скрипку: 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> 

Теперь для части магии ~ как yo может видеть, что я использую переменную для хранения строки , которую я хочу удалить до появления всплывающего окна, и только когда нажата кнопка «продолжить» , этот элемент удален (в противном случае переменная сбрасывается и всплывающее окно удаляется):

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

Примечания:

1. Я использую "DIV" внутри ТД, чтобы сделать эффект slideUp кросс-браузер. Некоторые браузеры не будут перемещаться напрямую по TR.
2. Весь сценарий основан на функциях обратного вызова эффектов. Если вы не хотите использовать эффекты, вы можете удалить div и удалить TR напрямую.
3. Если вы используете динамическую таблицу (строки добавляются динамически, а не все присутствующие на DOM готовы) просто использовать «.По (" нажмите»вместо .click() я использовал.

Получайте удовольствие!