单击动态选项卡时调用 Javascript 函数

Question

我是 MVC 新手，还没有写过很多 jQuery/JavaScript。我正在尝试通过单击导航选项卡来调用 JavaScript 函数。导航选项卡被动态添加到页面中。我知道单击时需要调用该函数的特定选项卡的“名称”，但是对于我的生活，我无法弄清楚在哪里或如何添加它。下面是动态添加标签到页面的代码：

        <ul class="nav nav-tabs  nav-tabs-line" role="tablist">
        @{
            for (var i = 0; i < Model.Tabs.Tabs.Count(); i++)
            {
                var n = Model.Tabs.Tabs[i];
                <li class="nav-item" style="@(n.isHidden == true ? "display:none;" : "")">
                    <a class="nav-link @(activeAdded == false && n.isHidden == false ? "active" : "")" data-toggle="tab" href="#@n.href" role="tab" aria-selected="true" id="@n.aId" style="@(n.isHidden == true ? "display:none;" : "")">
                        @n.name
                    </a>
                </li>
                if (activeAdded == false && n.isHidden == false)
                {
                    activeAdded = true;
                    tabstr += "$('#" + @n.href + "').addClass('active');$('#" + @n.aId + "').click();";
                }
                if (n.isHidden == true)
                {
                    tabstr += "$('#" + @n.href + "').css('display','none');";
                }
            }
        }
    </ul>

单击名为“支持”的选项卡时，我需要调用函数loadRequests()。非常感谢任何帮助。

Answer 1

您可以在父 <ul> 上使用事件委托。

$('ul.nav').on('click', '.nav-item:contains("Support")', function(e){
    loadRequests();
    //do something else
});

$('ul.nav').on('click', '.nav-item:contains("Support")', function(e) {
  console.log('clicked');
  //do something else
});
$('button').click(function(e) {
  $('ul.nav').append(`<li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#@n.href" role="tab" aria-selected="true" id="@n.aId">
                        ${Math.random() < 0.5 ? 'something else' : 'Support'}
                    </a>
                </li>`);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav nav-tabs  nav-tabs-line" role="tablist">
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#@n.href" role="tab" aria-selected="true" id="@n.aId">
                        Support
                    </a>
  </li>
</ul>
<button>Add Tab</button>