<script>标记在jQuery发布后不起作用

Question

我对jQuery有一个问题，因为它没有在请求的div中加载。

设置：

1. 在index.php上，我在4个选项卡上有4个莫里斯图表，它们都工作得很好。
2. 每个选项卡上都有一个列表。列表中的每一项都是一个链接。
3. 单击链接后，选项卡内的div通过post重新加载新数据： $(Document).ready(函数() {$(‘.click5’).click( companyId ){companyId=$(This).attr(‘id’))；$.post('./ajax/donut5.php'，{ clickthrough5：$('#company5-'+companyId+‘.clickthrough5').val()，ref_date_from5：$('#company5-'+companyId+’.ref_date_from5').val()，ref_date_to5：$('#company5-'+companyId+‘.ref_date_to5').val() }，函数(数据){$(‘.donut5’).html(数据)；))；
4. 新的div包含一个back按钮，用于将您带回到第一个图形的副本，但在另一个页面上(donut1.php)，为了我个人的方便起见： $(Document).ready(函数() {$(‘.backref2’).click( companyId ){companyId=$(This).attr(‘id’))；$.post('./ajax/donut1.php'，{ clickthrough6：$('#company6-'+companyId+‘.clickthrough6').val()，ref_date_from6：$('#company6-'+companyId+’.ref_date_from6').val()，ref_date_to6：$('#company6-'+companyId+‘.ref_date_to6').val() }，函数(数据){$(‘.donut5’).html(数据)；))；
5. 所有这些代码都可以正常工作，直到登陆到donut1.php。
6. 在这一点上，我开始拔出我的头发块几个小时，通过查看元素在Chrome，以确定问题。
7. 1秃顶的人，后来我意识到jQuery没有加载，虽然它是正确的请求在一个脚本标签。
8. 我在donut1.php和donut5.php上放置了以下内容，从而证实了这一点：
9. the可以很好地显示输出，而donut1.php不显示输出。
10. 然后，我试着使用Google 这里加载一个外部源代码和一个不同的版本，但这仍然不起作用。

需要注意的一点是:作为解决这一问题的一部分，我目前在页眉和页脚中加载了jquery。由于2页-- donut1.php和donut5.php --不包括页眉或页脚，所以我手动将它们都包含在其中。两份文件都是一样的。而donut5.php没有使用donut1.php。

顺序是index.php > donut5.php > donut1.php，然后继续在donut5和甜甜圈1之间循环--或者如果点击上的帖子在donut1.php中工作的话。

任何帮助都将不胜感激！

编辑: donut1.php：

<?php
include("../../../includes/config.php");

$selected = $_POST['clickthrough6'];
$date_from = $_POST['ref_date_from6'];
$date_to = $_POST['ref_date_to6'];

?>
    <script src="../../../js/jquery-1.11.0.js"></script>


<script>
$(document).ready(function () {
    $('.click7').click(function () {
        companyId = $(this).attr('id'); 

        $.post('./ajax/donut5.php', {
            clickthrough5: $('#company7-'+companyId+' .clickthrough7').val(),
            ref_date_from5: $('#company7-'+companyId+' .ref_date_from7').val(),
            ref_date_to5: $('#company7-'+companyId+' .ref_date_to7').val()
        },
        function (data) {
            $('.donut5').html(data);
        });
    });     
});


</script>

<div id="tabs2">
    <div id="tabs-1" class="donut5">

            <h4>Top 5 Referrers - Quotes <br /><small>Total number of Quotes between <?php echo date("d/m/Y", $date_from); ?> to <?php echo date("d/m/Y", $date_to); ?></small></h4>

        <div class="statgrid">

<div id="divTest1"></div>
<script type="text/javascript">
$("#divTest1").text("Hello, world!");
</script>

            <?php $quotes_q="SELECT 
            c.case_id,
            co.name AS company_name, 
            co.company_id AS company_id,
            COUNT(c.case_id) 'quote_count' 
            FROM 
            (`case` c,
            `panel_company` pc,
            `panel` p)
            LEFT JOIN company co ON (co.company_id = pc.company_id) 
            WHERE pc.panel_id = " .$RegisteredUser['panel_id']. " AND
            p.company_id = pc.company_id AND
            c.panel_id = p.panel_id AND 
            c.insert_date > ".$date_from. " AND 
            c.insert_date < ".$date_to. "
            GROUP BY p.panel_id
            ORDER BY quote_count DESC, co.company_id
            LIMIT 5"; 
            $result=$mysqli->query($quotes_q); ?>

            <div class="col-2-6">
                <div id="morris-donut-chart6"></div>
            </div>
        </div>
        <div class="statgrid">
            <?php while ($row=$result->fetch_array()) { ?>
            <div class="col-4-6">
            <div id="company7-<?php echo $row['company_id'];?>">
                <input type="hidden" class="ref_date_from7" value="<?php echo $date_from; ?>" />
                <input type="hidden" class="ref_date_to7" value="<?php echo $date_to; ?>" />
                <input type="hidden" class="clickthrough7" value="<?php echo $row['company_id'] ?>" />
                        <a><div id="<?php echo $row['company_id'];?>" class="click7 col-5-6"><?php echo $row['company_name']; ?></div></a>
                        <div class="col-1-6"><?php echo $row['quote_count']; ?></div>
            </div>

            </div>
            <?php } ?>

        </div>
    </div>

</div>
<?php
    $quotes_q = "SELECT 
            c.case_id,
            co.name AS company_name, 
            COUNT(c.case_id) 'quote_count' 
            FROM 
            (`case` c,
            `panel_company` pc,
            `panel` p)
            LEFT JOIN company co ON (co.company_id = pc.company_id) 
            WHERE pc.panel_id = ".$RegisteredUser['panel_id']." AND
            p.company_id = pc.company_id AND
            c.panel_id = p.panel_id AND 
            c.insert_date > ".$date_from." AND 
            c.insert_date < ".$date_to."
            GROUP BY p.panel_id
            ORDER BY quote_count DESC, co.company_id
            LIMIT 5";

    $result = $mysqli->query($quotes_q);    

?>
<script>
    var donut_data6 = [
    <?php while ($row = $result->fetch_array()) { ?>
    {
            label: '<?php echo substr($row['company_name'],0,15); ?>',
            value: '<?php echo $row['quote_count']; ?>'
    },
    <?php } ?>
    ];

    var donut6 = {
        element: 'morris-donut-chart6',
        data: donut_data6,
        resize: false
        }

    donut6 = Morris.Donut(donut6)

</script>

EDIT2:不太确定这是否会产生不同的结果，但在Network中，我有2个jquery清单，最初的清单是从加载304而不是修改的头加载的，第二个清单是在调用donut5.php时加载的，后者加载为200 OK。似乎在这之后，我可能不能再次请求jquery了？

EDIT3:在donut1.php中，除了jquery请求和我试图检索的div中的Hello之外，我已经删除了所有内容。Network仍然显示jquery没有加载。奇怪的是，我有这个精确的设置，减去图表，在同一个页面上工作(当然是不同的div类)，这确实很好地加载了jquery。

EDIT4:用jQuery代替JS作为一种测试，甚至连基本的独立JS都不起作用，添加如下：

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script> 

无事:( -在JS世界中循环

EDIT5:假设<script>是一个HTML标记，在它们中也是循环的。

EDIT6:当将console.logo(data)添加到上面列表第4项中的函数时，我得到以下内容(显然，为了测试，我已经排除了很多内容)：

    <script src="../../../js/jquery-1.11.0.js"></script>
    <script src="../../../js/jquery-ui.js"></script>

<!--
<script>
$(document).ready(function () {
    $('.click7').click(function () {
        companyId = $(this).attr('id'); 

        $.post('./ajax/donut5.php', {
            clickthrough5: $('#company7-'+companyId+' .clickthrough7').val(),
            ref_date_from5: $('#company7-'+companyId+' .ref_date_from7').val(),
            ref_date_to5: $('#company7-'+companyId+' .ref_date_to7').val()
        },
        function (data) {
            $('.donut5').html(data);
        });
    });     
});
</script>
-->

<div id="tabs2">
    <div id="tabs-1" class="donut5">

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script> 

<div id="divTest1"></div>
<script type="text/javascript">
$("#divTest1").text("Hello, world!");
</script>

    </div>

</div>

EDIT7：

在这里放置代码以确认我是否正确地输入了KevinB的建议。

var
    contentSelector = '.donut5',
    $content = $(contentSelector),
    contentNode = $content.get(0);

var documentHtml = function (html) {
    // Prepare
    var result = String(html)
        .replace(/<\!DOCTYPE[^>]*>/i, '')
    .replace(/<(html|head|body|title|meta|script)([\s\>])/gi,'<div class="document-$1"$2')
        .replace(/<\/(html|head|body|title|meta|script)\>/gi, '</div>');

    // Return
    return $.trim(result);
};



$(document).ready(function () {
    $('.click5').click(function () {
        companyId = $(this).attr('id');

        $.post('./ajax/donut5.php', {
            clickthrough5: $('#company5-' + companyId + ' .clickthrough5').val(),
            ref_date_from5: $('#company5-' + companyId + ' .ref_date_from5').val(),
            ref_date_to5: $('#company5-' + companyId + ' .ref_date_to5').val()
        },

        function (data) {


            var
                $data = $(documentHtml(data)),
                $dataBody = $data.find('.donut5'),
                $dataContent = $dataBody.find(contentSelector),
                $menuChildren, contentHtml, $scripts;

            // Fetch the scripts
            $scripts = $dataContent.find('.document-script');
            if ($scripts.length) {
                $scripts.detach();
            }

            // Fetch the content
            contentHtml = $dataContent.html() || $data.html();
            $scripts.each(function () {
                var $script = $(this),
                    scriptText = $script.text(),
                    scriptNode = document.createElement('script');
                if ($script.attr('src')) {
                    if (!$script[0].async) {
                        scriptNode.async = false;
                    }
                    scriptNode.src = $script.attr('src');
                }
                scriptNode.appendChild(document.createTextNode(scriptText));
                contentNode.appendChild(scriptNode);
            });
            console.log(data);
        });
    });
});

EDIT8：

在EDIT7中尝试了上面的代码之后，.donut5就不再被从donut5.php拉到最初工作的index.php了。我可以看到，当单击donut5.php的链接时，jquery不再在Network选项卡上复制(尽管对它的调用仍然存在)。目前，我假设我没有在上面正确地映射一个div，因为我确实删除了:first类的一部分查找代码，因为我觉得它不是必需的，或者我设法使事情变得更糟了！

Answer 1

当您将htmlstring传递给.html时，会发生两种情况之一。它要么使用.innerHTML插入，要么使用.empty().append(htmlString)插入。选择哪一个是基于传入的htmlstring的复杂性。

如果比较简单，将使用.innerHTML，脚本将按您预期的方式执行。

但是，如果它更复杂，则元素首先被解析并附加到docFragment中，然后再追加到文档中。这个中间步骤是导致您的问题的原因，因为javascript将在元素成为document的一部分之前执行。

解决此问题的唯一方法是强制延迟javascript的执行，方法是要么对javascript进行编码，使其执行在以后被调用的回调中，要么在追加javascript之前从htmlstring中删除javascript，然后在后面执行。

以下是前者的一个例子：

(function divTestLooper () {
    if (!$("#divTest1").length) {
        // the element didn't exist, lets wait a little longer...
        return setTimeout(divTestLooper, 10);
    }
    $("#divTest1").text("Hello, world!");
})();

以下是后者的一个例子：

https://github.com/browserstate/ajaxify/blob/master/ajaxify-html5.js#L60-L70

和

https://github.com/browserstate/ajaxify/blob/master/ajaxify-html5.js#L123-L135

和

https://github.com/browserstate/ajaxify/blob/master/ajaxify-html5.js#L158-L167

当然，最好的解决方案可能是完全避免这个问题，方法是不将javascript包含在分词中。