jQuery选项卡表格首次点击消失、内部链接新开窗口规则不生效如何修复

• 问题1（首次点击表格元素内容消失）：你绑定的点击事件选择器$('#tabs a')匹配了#tabs容器内所有a标签，包含表格内的跳转链接，点击表格链接时会错误触发选项卡加载逻辑，同时你的代码里没有AJAX写入的目标元素.tabs-content，导致原有内容被清空后找不到新内容渲染。
• 问题2（链接不弹窗直接跳转）：原弹窗绑定逻辑仅在页面首次加载时执行，只绑定了当时已存在的DOM元素，AJAX动态加载进来的表格链接没有被绑定弹窗事件，所以会执行默认跳转逻辑。

1. 修正HTML内容容器 #

在原有表格内容外层加.tabs-content容器，方便AJAX内容写入：

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Al-Ar</a></li>
    <li><a href="#tabs-2">Ar-D</a></li>
    <li><a href="#tabs-3">E-Ha</a></li>
    <li><a href="#tabs-4">Ha-J</a></li>
    <li><a href="#tabs-5">K-Mo</a></li>
  </ul>
  <table class="tablica">
    <tbody>
      <tr class="tr1">
        <td></td>
      </tr>
      <tr class="tr">
        <td>
          <!-- 新增.tabs-content容器 -->
          <div class="tabs-content">
            <div id="tabs-1">
              <table class="pol">
                <tbody>
                  <tr>
                    <td class="td10" colspan="4">Al..Ar</td>
                  </tr>
                  <tr>
                    <td class="td1"><a href="1.html">1</a></td>
                    <td class="td2">1</td>
                  </tr>
                  <tr>
                    <td class="td1"><a href="2.html">2</a></td>
                    <td class="td2">2</td>
                  </tr>
                  ...
                  <tr>
                    <td class="td1"><a href="205.html">205</a></td>
                    <td class="td2">205</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </td>
      </tr>
      <tr class="tr1">
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

2. 修正选项卡点击事件 #

把选择器限定为仅选项卡栏的链接，避免误触发表格内链接的事件：

$('#tabs > ul a').click(function(e) {
  e.preventDefault();
  var url = "./tabsContent1.php";
  var urlId = $(this).attr("href");
  $(".tabs-content").load(url + " " + urlId);
});

3. 修正弹窗绑定逻辑 #

改为事件委托模式，兼容动态加载的链接元素，无需重复绑定，直接替换原有onload绑定逻辑即可：

$(document).on('click', 'a[href*="hotel"]', function(e) {
  if(this.href.match(/.*hotel\d+\.html/)){
    window.open(this.href,'a','width=740px, height=750px, resizable=yes, scrollbars=yes, left=20px, top=20px');
    e.preventDefault();
  }
});

内容的提问来源于stack exchange，提问作者Blasius