Question

我试图通过jQuery从子按钮元素中删除父td的类。单击外部tr元素时，我可以删除该类，但是当尝试将类添加回父级时，它不会执行任何操作。调试时它似乎工作。我试图这样做而无需重新加载页面，因此按钮单击上的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

你已经在tr上设置了click类，导致它在关闭按钮的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

使用子按钮将类删除到父td元素

1 个答案: