javascript - 单击动态选项卡时调用 Javascript 函数
问题描述
我是 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()
单击名为“支持”的选项卡时,我需要调用该函数。非常感谢任何帮助。
解决方案
您可以在 parent 上使用事件委托<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>
推荐阅读
- wordpress - Wordpress 自定义元框仅用于一页
- apache-camel - 如何在 Camel 中实现状态轮询 SQL 消费者?
- javascript - 有没有一种优雅的方式将参数对象传递给函数?
- activemq - 我们可以将我的架构定义为 ESB 吗?
- php - 表单提交后 $_POST 没有得到值
- javascript - JavaScript 合并画布和视频上下文
- angularjs - uibModal 完全禁用背景并允许背景点击
- javascript - 如何在 ie 11 throught javascript 或 ie 设置中打开新进程中的选项卡
- c# - DataGridView 对象引用未设置为对象的实例
- php - 从控制器调用 Phalcon TaskAction