只有这样做，如果ajax-load()数据包含

Question

我需要从另一个html文件加载内容片段到我的index.html，到一个div ID为"#content-main"。这是使用jquery load()完成的。因为我只做DIV的片段加载类".fragment"，我必须从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来显示我的结构。

你可以:

(抱歉，我不能在这里添加html-head，所以只需添加doctype, head &你头脑中的身体标签。作为脚本，我只是在head

中添加jquery-1.11.0.min.js

<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");
}