Удаление класса в родительский элемент td с дочерней кнопкой

Question

Я пытаюсь удалить класс в родительский td из дочернего элемента button через jQuery. Я могу удалить класс, когда внешний элемент tr нажат без проблем, но при попытке добавить класс обратно к родительскому td он ничего не делает. Когда отладка кажется сработавшей. Я пытаюсь сделать это, не перезагружая страницу, поэтому метод preventDefault на кнопке щелкнет. Любые идеи о том, что может вызвать проблему?

Мой HTML заключается в следующем:

<div class="panel panel-default"> 
<table id="order" class="table table-hover table-bordered"> 
    <thead class="table-header"> 
     <tr> 
     <th class="text-center"> 
      Order Number 
     </th> 
     <th class="text-center"> 
      Project Number 
     </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="click"> 
     <td id="orderNumber"> 
      1313 
     </td> 
     <td> 
      50 
     </td> 
     <td id="td1313" class="hidden"> 
      <div class="verify-box"> 
      <div class="window"> 
       <button class="close"> 
       X 
       </button> 
       <span class="title"> 
          Verify Order 
         </span> 
       <div class="panel panel-default"> 
       <table class="table table-hover table-bordered"> 
        <thead class="table-header"> 
        <tr> 
         <th> 
         Item Number 
         </th> 
         <th> 
         Item Description 
         </th> 
        </tr> 
       </thead> 
       <tbody> 
       <tr> 
        <td class="text-center"> 
        123456 
        </td> 
        <td class="text-center"> 
        Description 
        </td> 
       </tr> 
       </tbody> 
      </table> 
      </div> 
       <button class="btn btn-default" type="button"  onclick="window.print()"> 
       Print 
       </button> 
      </div> 
      </div> 
     </td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

Вот JavaScript:

$('.click').on('click', function() { 
    var $td = $(this).find('#orderNumber'); 
    var td = "#td" + $td.text().trim(); 
    $(td).removeClass('hidden'); 
}); 

// Closes verification window 
$('.close').on('click', function(e) { 
    e.preventDefault(); 
    var $td = $(this).closest('td'); 
    $td.addClass('hidden'); 
}); 

Я также включая скрипку https://jsfiddle.net/tspuq9vo/3/

Answer 1

Вы установили класс щелчок на тр вызывает он должен быть запущен сразу после события click для кнопки закрытия.

Как быстро исправить вы можете остановить событие клика от распространяющегося с помощью

$('.click').on('click', function() { 
 
    var $td = $(this).find('#orderNumber'); 
 
    var td = "#td" + $td.text().trim(); 
 
    $(td).removeClass('hidden'); 
 
}); 
 

 
// Closes verification window 
 
$('.close').on('click', function(e) { 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 
    var $td = $(this).closest('td'); 
 
    $td.addClass('hidden'); 
 
});

В противном случае вы должны действительно быть нацелены только на интерактивный TD-s непосредственно