Question

通过访问，您可以看到它的工作方式：的 link text

即使用标准加载加载所有内容。

您可以尝试在此处动态加载： link text
然后只需单击“部件”链接...您可以看到每个人都没有提醒。

我有一种感觉，它与检测何时触发getscript的能力有关。在动态加载时，ondomready将无法重新加载。

以下是将加载内容的主要脚本：

$('#sub-navigation li a').click(function(){
    var toLoad = $(this).attr('href')+' #content-container > *';
    $('#content-container').hide('fast',loadContent);


    var href = $(this).attr('href');
    if (href == ".") {
        window.location.hash = ""; 
    } else {
        window.location.hash = href; 
    }

    // first remove the selected class from the active one
    $('#sub-navigation li.selected').removeClass('selected');
    // then find the parent li of the clicked element and add the selected class
    $(this).parents('li').addClass('selected');

    //$('#load').remove();
    //$('#wrapper').append('<span id="load">LOADING...</span>');
    //$('#load').fadeIn('normal');


    function loadContent() {
        $('#content-container').load(toLoad,'',showNewContent())
    }
    function showNewContent() {
        $('#content-container').show('normal',hideLoader());
    }
    function hideLoader() {
        //$('#load').fadeOut('normal');
    }
    return false;

});

这是加载的文件：

<div id="sub-navigation-content" class="transparent">
</div>
<div id="content-container" class="transparent">
    <div id="content">
        <link rel="stylesheet" type="text/css" href="/files/tablesorter/themes/blue/style.css">
        <script type="text/javascript"> 
            $(document).ready(function () {
                $.getScript("/files/tablesorter/jquery.tablesorter.min.js", function() {
                    $("#parts").tablesorter();
                    alert('sort performed');
                });
            });
        </script> 
        !!!!!!! INSERT MORE HTML HERE !!!!!!!
    </div>
</div>

这里是“INSERT MORE HTML HERE”的其余部分：

                <h1>Parts</h1>
            <table id=parts class=tablesorter style="width: 500px;">
                <thead>
                <tr>
                    <th>Part #</th>
                    <th>Part Description</th>
                    <th>Price</th>
                    <th>Additional<br>Shipping</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>AM01</td>
                    <td>ECONOMY OARS (EACH)</td>
                    <td>$30.00</td>
                    <td>$3.00</td>
                </tr>
                <tr>
                    <td>AM02</td>
                    <td>DELUXE OARS (EACH)</td>
                    <td>$42.00</td>
                    <td>$3.00</td>
                </tr>
                <tr>
                    <td>AM03</td>
                    <td>OAR LOCKS (PAIR)</td>
                    <td>$10.00</td>
                    <td>$2.00</td>
                </tr>
                <tr>
                    <td>AM04</td>
                    <td>LAKER BOW CASTING</td>
                    <td>$25.00</td>
                    <td>$3.00</td>
                </tr>
                <tr>
                    <td>AM05</td>
                    <td>PRO BOW CASTING</td>
                    <td>$25.00</td>
                    <td>$3.00</td>
                </tr>
                <tr>
                    <td>AM06</td>
                    <td>OAR LOCK CASTING W/INSERT</td>
                    <td>$28.00</td>
                    <td>$3.00</td>
                </tr>
                <tr>
                    <td>AM07</td>
                    <td>REAR CORNER CASTING RIGHT</td>
                    <td>$25.00</td>
                    <td>$3.00</td>
                </tr>
                <tr>
                    <td>AM08</td>
                    <td>REAR CORNER CASTING LEFT</td>
                    <td>$25.00</td>
                    <td>$3.00</td>
                </tr>
                <tr>
                    <td>AM09</td>
                    <td>FISHERMAN BOW SET (3 PC.)</td>
                    <td>$25.00</td>
                    <td>$3.00</td>
                </tr>
                <tr>
                    <td>AM10</td>
                    <td>OAR LOCK INSERTS (EACH)</td>
                    <td>$4.00</td>
                    <td>$2.00</td>
                </tr>
                <tr>
                    <td>AM11</td>
                    <td>DRAIN PLUG (5/8 MODIFIED)</td>
                    <td>$5.00</td>
                    <td>$2.00</td>
                </tr>
                <tr>
                    <td>AC06</td>
                    <td>LIFT VEST TYPE III</td>
                    <td>$25.00</td>
                    <td>$2.00</td>
                </tr>
                <tr>
                    <td>AC07</td>
                    <td>1" DRIAN PLUG</td>
                    <td>$5.00</td>
                    <td>$2.00</td>
                </tr>
                <tr>
                    <td>AC09</td>
                    <td>5/8" DRAIN PLUG</td>
                    <td>$5.00</td>
                    <td>$2.00</td>
                </tr>
                <tr>
                    <td>AM11</td>
                    <td>TOUCH UP PAINT</td>
                    <td>$15.00</td>
                    <td>$2.00</td>
                </tr>
                <tr>
                    <td>AM69</td>
                    <td>CONSOLE (SUPER PRO 16)</td>
                    <td>$135.00</td>
                    <td>Please call</td>
                </tr>
                <tr>
                    <td>AM70</td>
                    <td>CONSOLE W/STEERING (SUPER PRO 16)</td>
                    <td>$430.00</td>
                    <td>Please call</td>
                </tr>
                </tbody>
            </table>

根据答案中jason的捕获量。我没有选择我的知识，而是做一个丑陋的解决方案如下：

如果有人有更优雅的想法，请告诉我。

    function showNewContent() {
        $('#content-container').show('normal',hideLoader);

        if (href == "parts") {
            $.getScript("/files/tablesorter/jquery.tablesorter.min.js", function() {
                $("#parts").tablesorter();
            });
        }
    }

Edit: 12/18/2010-
我现在必须根据加载的“部件”页面动态加载不同的脚本。当然，我可以继续使用我之前做过的相同解决方法，但我正在寻找更好的解决方案。我已经添加了一笔赏金来帮忙。

updated solution: 通过使用get（）：

模拟加载函数，我能够做我想做的事

$.get(href, function(response){
    var contents = $(response).find('#content-container > *');
    $("#content-container").html(contents);
});

这或多或少是杰森告诉我的;因此我给了他赏金。

updated solution 2: find（）命令将从1.4+中删除任何脚本标记，因此我必须这样做：

$.get(href, function(response){
    var contents = $(response).find('#content-container > *');
    $(response).filter('script[src=""]').each(function(){
            contents.push(this);
    });
    $("#content-container").html(contents);
});

我仍然希望避免这种复杂的混乱，但似乎这就是我必须忍受的。

Answer 1

以下是来自$ .load的相关代码，它在jQuery 1.4.2中执行插入（从第4820行开始）：

// Request the remote document
jQuery.ajax({
url: url,
type: type,
dataType: "html",
data: params,
complete: function( res, status ) {
    // If successful, inject the HTML into all the matched elements
    if ( status === "success" || status === "notmodified" ) {
        // See if a selector was specified
        self.html( selector ?
            // Create a dummy div to hold the results
            jQuery("<div />")
                // inject the contents of the document in, removing the scripts
                // to avoid any 'Permission Denied' errors in IE
                .append(res.responseText.replace(rscript, ""))

                // Locate the specified elements
                .find(selector) :

            // If not, just inject the full result
            res.responseText );
    }

    if ( callback ) {
        self.each( callback, [res.responseText, status, res] );
        }
    }
});

如您所见，如果在要加载的内容中指定了一个选择器（您是），jQuery将在将HTML插入页面之前从HTML中删除所有内联脚本块。

为什么呢？动态创建DOM文档片段在浏览器中并不是完全一致的，并且没有真正的方法来控制何时，如何或甚至是否将执行脚本。

一个例子是：它应该在创建片段时发生（就像jQuery一样，在它运行选择器之前）？在这种情况下，运行脚本时，新内容实际上不会成为父文档的一部分。

你怎么解决这个问题？好吧，你总是可以在内部重新创建$ .load（）所做的事情（基本上只是发出一个GET请求，从响应中创建一个jQuery对象，然后在附加/注入之前调用它上面的.find(selector)）。但是，要小心。这可能是不可靠的，我不知道不同的浏览器会对此做出怎样的反应。

我记得有一段时间正在阅读一篇关于此问题的长篇讨论 - 我现在找不到它，但是当我这样做时，我会在这里添加一个链接。

Answer 2

通过使用get（）：

模仿加载函数，我能够做我想做的事

$.get(href, function(response){
    var contents = $(response).find('#content-container > *');
    $("#content-container").html(contents);
});

这或多或少是杰森告诉我的;因此我给了他赏金。

从.load（）加载时.getScript（）不起作用

2 个答案: