使用jQuery .load()加载指定元素后内部JavaScript无法执行

我之前也碰到过一模一样的情况——用.load()带选择器加载指定元素时，里面的脚本就是不跑，因为jQuery在处理带片段选择器的load请求时，会自动剥离掉<script>标签，只保留HTML内容。结合你说的脚本依赖PHP变量没法单独抽成文件的情况，给你几个可行的解决办法：

方法一：手动获取完整页面并处理脚本 #

放弃在load里加#thread_entries选择器，改用$.get获取整个页面内容，然后手动提取需要的元素和脚本并执行：

$.get("localhost:8085/thread.php", function(pageContent) {
  // 从返回的页面中提取#thread_entries元素
  const $threadContent = $(pageContent).find("#thread_entries");
  // 把HTML内容插入到目标容器
  $("#thread").html($threadContent.html());
  
  // 提取并执行里面的脚本
  $threadContent.find("script").each(function() {
    const scriptCode = $(this).text();
    // 创建新的script标签执行代码（比eval更安全）
    const scriptTag = document.createElement('script');
    scriptTag.textContent = scriptCode;
    document.body.appendChild(scriptTag);
  });
});

这个方法不用改后端，适合快速救急，但要注意如果加载的内容不可控，执行脚本会有安全风险，所以只适合你自己可控的页面。

方法二：后端拆分HTML和脚本输出 #

修改你的thread.php，让它能根据参数分别返回纯HTML和脚本内容，然后分两次加载：

前端代码： #

// 先加载HTML部分
$("#thread").load("localhost:8085/thread.php?type=html #thread_entries", function() {
  // HTML加载完成后，加载对应的脚本
  $.getScript("localhost:8085/thread.php?type=script");
});

后端thread.php修改： #

<?php
if (isset($_GET['type'])) {
  if ($_GET['type'] === 'html') {
    // 只输出#thread_entries的HTML（不含script）
    ?>
    <div id="thread_entries">
      <div id="text">Texty text</div>
    </div>
    <?php
    exit;
  } elseif ($_GET['type'] === 'script') {
    // 输出脚本内容，设置正确的响应头
    header('Content-Type: application/javascript');
    ?>
    console.log("hussah!!!");
    function manualDropZone() {
      $('#<?php echo $id; ?> .dropzone').filedropbox({
        url: 'ajax.php/form/upload/<?php echo $this->field->get( 'id' ) ?>',
        link: $('#<?php echo $id; ?>').find("a.manual"),
        paramname: "upload[]",
        fallback_id: 'file-<?php echo $id; ?>',
        allowedfileextensions: <?php echo JsonDataEncoder::encode( $config['__extensions'] ?: array() ); ?>,
        allowedfiletypes: <?php echo JsonDataEncoder::encode( $mimetypes ); ?>,
        maxfiles: <?php echo $config['max'] ?: 20; ?>,
        maxfilesize: <?php echo $maxfilesize; ?>,
        name: '<?php echo $name; ?>[]',
        files: <?php echo JsonDataEncoder::encode( $files ); ?>
      });
    }
    <?php
    exit;
  }
}
// 下面是原来的完整页面输出代码
?>

这个方法逻辑更清晰，脚本通过getScript加载会自动执行，也避免了手动处理脚本的麻烦。

方法三：分离数据与逻辑（最佳实践） #

把脚本依赖的PHP变量以data-*属性的形式嵌入到HTML元素中，然后前端写通用的初始化脚本，完全不需要后端生成JS：

后端thread.php的HTML修改： #

<div id="thread_entries">
  <div id="text">Texty text</div>
  <!-- 把PHP变量存到data属性里 -->
  <div class="dropzone-config"
       data-id="<?php echo $id; ?>"
       data-upload-url="ajax.php/form/upload/<?php echo $this->field->get( 'id' ) ?>"
       data-fallback-id="file-<?php echo $id; ?>"
       data-extensions='<?php echo JsonDataEncoder::encode( $config['__extensions'] ?: array() ); ?>'
       data-mimetypes='<?php echo JsonDataEncoder::encode( $mimetypes ); ?>'
       data-maxfiles="<?php echo $config['max'] ?: 20; ?>"
       data-maxfilesize="<?php echo $maxfilesize; ?>"
       data-name="<?php echo $name; ?>[]"
       data-files='<?php echo JsonDataEncoder::encode( $files ); ?>'>
  </div>
</div>

前端通用脚本（可以放在主页面或单独JS文件）： #

// 通用的dropzone初始化函数
function initManualDropZone(configElement) {
  const config = $(configElement).data();
  // 自动转换JSON格式的data属性
  config.extensions = JSON.parse(config.extensions);
  config.mimetypes = JSON.parse(config.mimetypes);
  config.files = JSON.parse(config.files);

  $(`#${config.id} .dropzone`).filedropbox({
    url: config.uploadUrl,
    link: $(`#${config.id}`).find("a.manual"),
    paramname: "upload[]",
    fallback_id: config.fallbackId,
    allowedfileextensions: config.extensions,
    allowedfiletypes: config.mimetypes,
    maxfiles: config.maxfiles,
    maxfilesize: config.maxfilesize,
    name: config.name,
    files: config.files
  });
}

// 加载HTML后调用初始化
$("#thread").load("localhost:8085/thread.php#thread_entries", function() {
  initManualDropZone($(".dropzone-config"));
});

这个方法是最推荐的，它把后端数据和前端逻辑彻底分离，代码更易维护，也避免了后端生成JS带来的各种问题。

内容的提问来源于stack exchange，提问作者Martin Claesson