javascript - jQuery 覆盖表 td 值中的超链接

Question

我有一个如下表，当用户单击表的发票编号列时，我尝试打开一个带有链接 '/ledesInvoiceErrors.do?InvoiceId='+parentInstanceId' 的弹出窗口(INV1 和 INV2)，而不是转到与发票编号字段关联的超链接。

http://jsfiddle.net/pmgguwob/3/

<div class="listTable expanded">
  <table class="searchResults {id:321}">
     <thead>
        <tr class="tipAdded">
           <th class="first unsortable ui-state-default ui-state-hover ui-state-active"></th>
           <th data-name="Invoice Number" class="typeString    ui-state-default ui-state-hover sort asc ui-state-active" id="sort_invoiceNumber">
              Invoice Number
           </th>
           <th data-name="Invoice Total" class="typeMoney last   ui-state-default ui-state-hover ui-state-active sort" id="sort_invoiceTotal">
              Invoice Total
           </th>
        </tr>
     </thead>
     <tbody class="">
        <tr class="tipAdded">
           <td class="first">
              <div style="display:none" class="renderedValue">
                 INV1
              </div>
               <input value="65" name="invoices0.id" type="hidden" class="check"/>
           </td>
           <td class="typeString  ">
              <div class="data typeString"><a tooltip="" class="listLink " title="" href="/CP/show.do?parentInstanceId=51;parentFieldName=invoices">
                 INV1        
                 </a>
              </div>
           </td>
           <td class="typeMoney  ">
              <div class="data typeMoney">
                 15.25 USD        
              </div>
           </td>
        </tr>
        <tr class="tipAdded">
           <td class="first">
              <div style="display:none" class="renderedValue">
                 INV2
              </div>
               <input value="66" name="invoices1.id" type="hidden" class="check"/>
           </td>

           <td class="typeString  ">
              <div class="data typeString"><a tooltip="" class="listLink " title="" href="/CP/show.do?parentInstanceId=55;parentFieldName=invoices">
                 INV2        
                 </a>
              </div>
           </td>
           <td class="typeMoney  ">
              <div class="data typeMoney">
                 111.25 USD        
              </div>
           </td>
        </tr>
     </tbody>
  </table>

我是 jQuery 的初学者，我真的不知道如何实现这一点。有人可以用这个来取悦我吗？

注意:我无权修改与发票编号字段关联的超链接，因为这些链接是从我们的内部框架生成的。但我可以在页面上嵌入 jquery 脚本来覆盖超链接

解决方案已更新 http://jsfiddle.net/pmgguwob/10/

Answer 1

要覆盖超链接的行为，您可以执行以下操作:

$(function(){
    // you may have to narrow down the selector here to a specific class or 'td'
    $(".searchResults a").on('click', function(e){
        e.preventDefault();                    
        var url = $(this).attr('href');
        window.open(url, 'window name', 'window settings');
        return false;
    });
});

<强> Updated Fiddle