0

我有一个包含选项卡的页面，这些选项卡的内容通过 ajax 点击加载。现在每次加载页面时，我都必须激活常见的某些功能。

例子

$('#form-modal').submit(function(e){//somecode//});

如果我不这样做，某些元素将无法按要求工作。

目前正在做的是将这些功能包含在通过 ajax 发送的所有选项卡内容中。该页面没有刷新，它只是加载了新内容，为此我一次又一次地在新内容中包含常用功能。

如果我不再包含这些功能。这些功能不适用于新内容。

我在这里指的是用于操作 html 事件的 jquery 函数

我不想在任何地方都包含脚本。我应该怎么做才能使这些功能在选项卡中发挥作用，而不是在每个地方都包括它们。

4

1 回答 1

1

您应该将事件处理程序绑定到加载页面中的父元素。

例如：

<div class="tabscontainer">
    <div class="tabs">
        <ul>
            <li>Tab 1</li>
            <li>Tab 2</li>
            <li>Tab 3</li>
            <li>Tab 3</li>
        </ul>
    </div>
    <div class="cont tab1">
        Tab 1 Contents
    </div>
</div>

如果它们已经存在，您可以显示/隐藏每个 .cont.tabX - 如果它们不存在，则通过 ajax 加载新的。

然后：

假设您在 tab2 中加载了一个 id 为 #form-modal 的表单，如下所示

<div class="tabscontainer">
    <div class="tabs">
        <ul>
            <li>Tab 1</li>
            <li>Tab 2</li>
            <li>Tab 3</li>
            <li>Tab 3</li>
        </ul>
    </div>
    <div class="cont tab1">
        Tab 1 Contents
    </div>
    <div class="cont tab2">
        <form id="form-modal" />
    </div>
</div>

使用这个 jQuery：

$('.tabscontainer').on('submit','#form-modal', function(e){//somecode//});

如果您添加了另一个表单#form2：

$('.tabscontainer').on('submit','#form2', function(e){//form 2 code//});

thsi 允许您在页面上加载您需要的所有 js - 即使对于尚不存在的元素 - 以捕获相关事件，因为它使 dom 冒泡并应用于正确的元素

于 2013-04-16T14:30:08.483 回答