ajax调用不工作​​标签点击

Question

为什么Ajax调用$.load当我<td>标签点击不工作？
这里顺便说一下

$("body").on("click", ".license-table td", function(){ 
     console.log('ehhh') 
     var pane = $(this).parent('.license-table').data("pane"); 
     var url = $(this).parent('tr').data("href"); 
     $(pane).load(url, function(){ 
      $(".table-content").css({ 
       height: '500px' 
      }).jScrollPane({ 
       autoReinitialise: true, 
       hideFocus: true 
      }); 
     }); 
    }); 

剧本，这里是标记。

<div class="tab-pane" id="license"> 
         <div class="row content-tools"> 
          <div class="col-md-3"> 
           <div class="options enabled"> 
            <a href="distribute-license-modal.php" data-toggle="modal" data-target="#modal" data-dismiss="modal">Allocate Licenses</a> 
           </div> 
          </div> 
          <div class="col-md-3"> 
           <div class="options enabled"> 
            <a href="unallocate-license-modal.html" data-toggle="modal" data-target="#modal" data-dismiss="modal">Unallocate Licenses</a> 
           </div> 
          </div> 
          <div class="col-md-3">&nbsp;</div> 
          <div class="col-md-3"> 
           <form action=""> 
            <input type="text" name="q" class="col-md-12 search"/> 
           </form> 
          </div> 
         </div> 
         <div class="row" style="margin:0"> 
          <div class="table-content col-md-12"> 
           <div class="inner table-responsive pade-content-big"> 
            <table class="table dtable license-table" data-pane="#license"> 
             <tr> 
              <td width="30%">&nbsp;</td> 
              <td width="10%">Total</td> 
              <td width="10%">Distributed</td> 
             </tr> 
             <tr data-href="license-details.html"> 
              <td><a href="license-details.html" class="ajax-link black-link" data-pane="#license">Product Name</a></td> 
              <td>200</td> 
              <td>50</td> 
             </tr> 
             <tr data-href="license-details.html"> 
              <td><a href="license-details.html" class="ajax-link black-link" data-pane="#license">Product Name</a></td> 
              <td>200</td> 
              <td>120</td> 
             </tr> 
            </table> 
           </div> 
          </div> 
         </div> 
        </div> 

的console.log("ehhh")是在我的控制台窗口中显示出来，但XHR请求犯规出现。怎么了？ :(

Answer 1

.parent()函数获取直接的父元素当你提供一个选择器参数时，它会过滤结果;它不会在祖先链上找到一个匹配的祖先，为此，你应该使用.closest()功能：

var pane = $(this).closest('.license-table').data("pane");