Question

我需要将来自另一个html文件的内容片段加载到我的index.html中，加载到ID为“＃content-main”的DIV中。这是使用jquery load（）完成的。由于我只使用类“.fragment”进行DIV的碎片加载，我必须单独从html文件加载脚本（jQuery在使用碎片加载时不会加载它们）。

我是通过使用getScript来实现的，它可以正常工作，如下所示：

$('#content-main').load(pageName + " .fragment", function() { 
    $.getScript("js/Magic-init.js");            
});

问题是，我不想为每个加载内容的html加载/执行脚本，只为那些为加载的DIV分配特殊类的脚本。所以我虽然可以使用if条件，或者也许是find（），但我可以让它工作。

那么我如何添加条件来检查jQuery的加载？

这不起作用：

$('#content-main').load(pageName + " .fragment", function() { 
    if( $('.Magic').length ) {
        $.getScript("js/Magic-init.js");            
    }
});

修改添加原始index.htm和content.htm以显示我的结构。

INDEX.HTM：

（对不起，我不能在这里添加html-head，所以只需在脑海中添加doctype，head＆amp; body-tags。作为脚本，我只需在头部添加jquery-1.11.0.min.js） / p>

<div id="nonFooter">
    <div id="page">
        <div id="menu">
            <h1><a href="index.htm">test</a></h1>

            <hr>

            <nav>
                <ul>                    
                    <li><a href="content.htm" class="ajaxLink">click me to see ajax-loaded content</a></li>                 
                </ul>
            </nav>
        </div>  <!-- END id=menu -->

        <div id="content-main"></div> <!-- in here comes the AJAX injected content from the clicked ajaxLink -->

    </div> <!-- END id=page -->
</div> <!-- END id=nonFooter -->


<script>
    $(function () {
        <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
        <!-- - - - - - - - - AJAX Load Contents & HTML5 History  - - - - - - - - -->
        <!-- - - - - - - - http://www.codemag.com/Article/1301091  - - - - - - - -->            

        function navigateToPage() {
            var pageName = window.location.pathname;
            $('#content-main').load(pageName + " .fragment", function() {   
                if($($('#content-main').html()).find(".Magic").length  > 0) { //delete this line for testing script-loading without if-condition
                    $.getScript("init.js");
                } //delete this line for testing script-loading without if-condition
            });
        }

        $("a.ajaxLink").on('click', function (e) {
            if (window.history && window.history.pushState) {
                e.preventDefault();
                var pageName = $(this).attr("href");
                window.history.pushState(null, "", pageName);
                navigateToPage();
            }
        });
    });
</script>

CONTENT.htm

<div id="nonFooter">
    <div id="page">
        <div id="menu">
            <h1><a href="index.htm">test</a></h1>

            <hr>

            <nav>
                <ul>                    
                    <li><a href="content.htm" class="ajaxLink">click me to see ajax-loaded content</a></li>                 
                </ul>
            </nav>
        </div>  <!-- END id=menu -->

        <div id="content-main">
            <div id="gallery-1" class="Magic fragment">
                <div class="imagepos">
                    <p>black text.<br>
                    <span>This text is red when script loaded & link clicked.</span></p>
                </div>                          
            </div>
        </div>

    </div> <!-- END id=page -->
</div> <!-- END id=nonFooter -->

INIT.js：

$('.Magic').find( "span" ).css( "color", "red" );

Answer 1

试试这个 -

$('#content-main').load(pageName + " .fragment", function() { 
    if($($('#content-main').html()).find(".Magic").length  > 0) {
        $.getScript("js/Magic-init.js");            
    }
});

顺便说一下，确保你的html是完美的，因为我已经无数次地使用了这种语法而且它们都有效。

Answer 2

这就是诀窍：

if($('#content-main').find(".Magic").length) { 
  $.getScript("init.js");
}

只有这样，如果ajax-load（）ed数据包含它

2 个答案: