在 innerHTML 中执行脚本标记以执行 Ajax 调用

Question

我有一个“查询构建器”页面 (querybuilder.php)，它允许用户构建 SQL 查询然后执行它。所有这些都可以正常工作。

查询的参数被发布到另一个 PHP 页面 (queryresults.php)，该页面运行存储的过程，然后循环遍历结果以创建插入到 querybuilder.php 的表。该循环在每一行都包含一个复选框，其值设置为每条输出记录的 ID。

Queryresults.php（innerHTML 页面）也有一些下拉菜单，允许用户对已“检查”的行执行某些操作。我在 Javascript 之外创建了一个循环，为每个连续的复选框执行一次。

据我了解 - 我不能在 innerHTML 页面中包含脚本标签，但我需要与仅在加载 innerHTML 时创建并分配值的复选框进行交互。

我查看了一些解决方法，包括以下内容：http://24ways.org/2005/have-your-dom-and-script-it-too，但似乎都不起作用。

$checkboxes = isset($_POST['checkbox']) ? $_POST['checkbox'] : array();
foreach($checkboxes as $value) {

echo "
<script>
$('#doAction').on('click', function() {
  var id = ".$value.";
  var u = document.getElementById('user').value;

  $.ajax({
    type: \"POST\",
    url: \"storedprocs.php\",
    data: { id: id, u: user }
    })
    .done(function(msg) {
       document.getElementById('done').innerHTML=msg;
    });
  });
</script>";
}

来自 innerHTML 页面的最终 HTML 如下所示：

echo "
<div class="row">
  <div class="col-md-6">
    <select id="user" class="input-sm">
    <option value="1">User 1</option>
    <option value="2">User 2</option>
    <option value="3">User 3</option>
    </select>
  </div>

  <div class="col-md-3">
  <button class="btn" id="doAction" data-stmt="false">Submit</button>
  </div>
</div>

<div class="row">
<div class="leTable">
<table class="table-hover table-responsive">
  <tr class="heading">';
echo $tableheaders;
echo '</tr>';

  foreach($result as $row) {
   echo '<tr>
    <td><input type="checkbox" name="chkbox" id="idChkBox"><a href="otherpage.php?id='.$row[0].'" value="'.$row[0].'">'.$row[0].'</a></td>';
    for ($x=1; $x<sizeof($row); $x++) {
     echo '<td>'.$row[$x].'</td>';
    }
 echo '</tr>';
 }
echo '</table>';
echo '</div></div>';

为了使问题更加复杂，第二个变量来自的 id=user 元素是由另一个完全独立的 innerHTML 设置的，所以我也不知道如何引用它。

真正令人头疼的问题，我在 Google 上进行了广泛的搜索，并通过 StackExchange 进行了搜索，但无济于事。任何帮助将不胜感激！

谢谢！

Answer 1

我认为如果没有太多语法错误，您的代码可以工作。它是 document.getElementById，而不是 document.getElementbyId。除此之外，您还应该使用 ;

结束变量声明

这一切都取决于最终呈现的页面。我们不知道最终的 php 输出是什么。

我强烈建议您使用外部 JavaScript 文件。内联 JS 不好。