Javascript <；脚本>；标记在jQuery帖子之后不起作用

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

设置：

在index.php上，我在4个选项卡上有4个Morris图表，都运行良好

每个选项卡上都有一个列表。列表中的每个项目都是一个链接

单击链接后，选项卡中的div将重新加载新数据 邮寄：

$(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) {
        $('.donut5').html(data);
    });
});     
});

新的div包含一个back按钮，可将您带回第1个图形的副本，但位于不同的页面（donut1.php），以便于我个人使用：

$(document).ready(function () {
$('.backref2').click(function () {
    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()
    },
    function (data) {
        $('.donut5').html(data);
    });
});     
});

所有这些代码在登录donut1.php之前都可以正常工作

在这一点上，我继续拉我的头发块几个小时，通过检查铬元素，以确定问题

1.后来我意识到jQuery没有加载，尽管它是在脚本标记中正确请求的

我通过在donut1.php和donut5.php上放置以下内容来确认这一点：

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

$（“#divTest1”）.text（“你好，世界！”）；

donut5.php显示输出良好，而donut1.php不显示

然后，我尝试使用找到的Google代码片段加载一个外部源代码和一个不同的版本，但仍然不起作用

需要注意的几点： 我目前在我的页眉和页脚中加载jquery，作为解决这个问题的一部分。 由于两个页面donut1.php和donut5.php不包含页眉或页脚，因此我已手动将它们都包含在其中。两个文件中的方式完全相同。donut5.php起作用，而donut1.php不起作用

顺序是index.php>donut5.php>donut1.php，然后继续在donut5和donut1之间循环-或者，如果点击后的帖子在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>

$（文档）.ready（函数（）{
$（'.click7'）。单击（函数（）{
companyId=$（this.attr（'id'）；
$.post（'./ajax/donut5.php'{
点击5:$（“#公司7-”+公司ID+”.点击7'）.val（），
ref#date_from 5:$（“#company7-”+companyId+”.ref#date_from 7'）.val（），
参考日期5:$（“#公司7-”+公司ID+”.参考日期7'）.val（）
},
功能（数据）{
$（'.donut5'）.html（数据）；
});
});     
});
前5名推荐人-报价
到之间的报价总数
$（“#divTest1”）.text（“你好，世界！”）；
变量油炸圈饼数据6=[
{
标签：“”，
值：“”
},
];
变量donut6={
元素：“morris-donut-chart6”，
数据：油炸圈饼数据6，
调整大小：false
}
甜甜圈6=莫里斯甜甜圈（甜甜圈6）

编辑2： 不太确定这是否会产生不同的结果，但在网络选项卡中，我有两个jquery列表，第一个是从标头加载的，加载304 Not Modified，第二个是调用donut5.php加载的，加载为200 OK。似乎在此之后我可能无法再请求jquery了

EDIT3：在donut1.php中，除了jquery脚本请求和我试图检索的div中的helloworld之外，我已经删除了所有内容。“网络”选项卡仍然显示jquery未加载。奇怪的是，我有一个精确的设置，没有图表，在同一个页面上工作（当然是不同的div类），这确实可以很好地加载jquery

EDIT4：将jQuery替换为JS作为测试，即使是基本的独立JS也无法工作，添加到：

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

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

document.getElementById（“demo”）.innerHTML=“Hello JavaScript！”；

无：（-JS世界中的循环）

EDIT5：假设

是一个HTML标记，因此也在其中循环

EDIT6：当向上面列表项4中的函数添加console.logo（数据）时，我得到了以下信息（显然我排除了很多测试内容：

    <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>

document.getElementById（“demo”）.innerHTML=“Hello JavaScript！”；
$（“#divTest1”）.text（“你好，世界！”）；

编辑7：

在这里放置代码以确认我是否正确执行了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);
        });
    });
});

var
contentSelector='.donut5'，
$content=$（contentSelector），
contentNode=$content.get（0）；
var documentHtml=函数（html）{
//预备
变量结果=字符串（html）
.替换（/]*>/i''）
.replace（/]）/gi，“当您将htmlstring传递给.html时，会发生以下两种情况之一。它要么使用
.innerHTML
插入，要么使用
.empty（）.append（htmlstring）
插入。选择哪一个取决于传入的htmlstring的复杂性

如果相对简单，将使用.innerHTML，脚本将以您期望的方式执行

但是，如果更复杂，则在将元素附加到文档之前，首先解析元素并将其附加到docFragment中。这中间步骤是导致问题的原因，因为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!");
})();

下面是后者的一个例子：



和



和



当然，最好的解决方案可能是完全通过不在部分中包含javascript来避免这个问题。
好的，所以
donut1.php
被
donut5.php
调用，但是您没有看到返回的任何内容？也许从来没有达到AJAX调用。您的
donut5.php
看起来像什么？@Shahar一点也没有。我有我一直在跟踪日志