Question

我正在使用.load（）函数向我的页面添加内容，但我无法获取任何jquery脚本来处理加载的内容。

以下是加载的页面和脚本的示例：

<div class="content">

    <div class="sections">
        <div id="holder">
            <div class="resumelink" id="educ">
                Education
            </div>
            <div class="resumelink" id="work">
                Work
            </div>
            <div class="resumelink" id="skills">
                Skills
            </div>
        </div>
    </div>

    <div class="resumecontent">
        blah blah blah
    </div>

    <script src="jquery-2.0.3.min.js" type="text/javascript" ></script> 
    <script>
            $('#educ').click(function () {
                // any script here
            });

            $('#work').click(function () {
                // any script here
            });

            $('#skills').click(function () {
                // any script here
            });
    </script>
</div>

其他一些帖子似乎也有同样的问题，但似乎没有一个帖子能帮助我。无论我尝试什么，似乎没有脚本工作 - 不是在加载内容的初始页面上 - 甚至无法使console.log脚本工作。

@Archer提供的 SOLUTION - 只是添加一个jquery（）标记并添加到原始页面而不是加载的页面。一个例子：

jQuery(function($) {
    $(document).on("click", "#educ", function() {
        // any function here
    });
});

谢谢！

Answer 1

从您加载的html中删除所有脚本引用 - 使用.load()时不会执行它们。

<div class="content">
    <div class="sections">
        <div id="holder">
            <div class="resumelink" id="educ">
                Education
            </div>
            <div class="resumelink" id="work">
                Work
            </div>
            <div class="resumelink" id="skills">
                Skills
            </div>
        </div>
    </div>
    <div class="resumecontent">
        blah blah blah
    </div>
</div>

然后，在原始页面（或最好是包含的脚本文件）中，添加以下内容......

jQuery(function($) {
    $(".content").on("click", "#educ", function() {
        // any script here
    });

    $(".content").on("click", "#work", function() {
        // any script here
    });

    $(".content").on("click", "#skills", function() {
        // any script here
    });
});

Answer 2

我想你想这样做：

$('#container').load("content.html", function () {
     $('#educ').click(function () {
            // any script here
     });

     $('#work').click(function () {
          // any script here
     });

     $('#skills').click(function () {
          // any script here
     });
});

我认为Javascript不会在加载调用中执行，因此您需要将其放入回调中以使其执行。

Answer 3

在DOM就绪后绑定事件，使用此代码

 <script>
    $(document).ready(function(){
                $('#educ').click(function () {
                    // any script here
                });

                $('#work').click(function () {
                    // any script here
                });

                $('#skills').click(function () {
                    // any script here
                });
    });
        </script>

Answer 4

$（“。restumecontent”）。load（“insert.html”）;

.load（）页面不运行jquery

4 个答案: