Question

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

实施例

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

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

目前正在做的是在通过ajax发送的所有标签内容中包含这些功能。页面没有得到刷新，只有新内容被加载，我一次又一次地在新内容中包含常用功能。

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

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

我不希望在任何地方都包含脚本。我应该怎么做才能使功能在标签中工作，而不是在每个地方都包含它们。

Answer 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加载新文件。

THEN：

说你在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允许你在页面上找到你需要的所有j - 即使是尚未存在的元素 - 来捕捉相关事件，因为它冒出dom并应用于正确的元素

Jquery事件监听器 - HTML操作函数

1 个答案: