Bootstrap 不适用于 Javascript 调用的 PHP 选择答案

【问题标题】：Bootstrap does not apply on PHP select called by JavascriptBootstrap 不适用于 Javascript 调用的 PHP 选择
【发布时间】：2017-07-17 12:27:18
【问题描述】：

我正在使用引导模板和 X 可编辑的内联编辑引导插件。

我有 2 列显示当用户选择更新该行中的列时更新该行的人员和时间。更新是通过内联编辑完成的。我希望它显示谁编辑了它而不刷新页面。但是，这些行仅由 php 脚本回显，因此这是不可能的。

所以在搜索后我发现了通过 javascript 调用外部 PHP 脚本。但是，该 javacsript 调用的结果似乎不适用于 css 和 js 链接。

所以我尝试复制 echo 上的 css 和 js 链接，可编辑的列现在可以工作，但布局完全混乱，所以我认为，问题在于，主页中链接的 css 和 js 是不适用于由 javascript 调用的 PHP 脚本回显的行。但我不知道如何解决这个问题。也许还有一些我还不知道的事情。

当整个 PHP 代码在主页面中时它可以工作

我的代码是这样的……

<html>


<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-responsive.min.css" />
<link rel="stylesheet" href="css/uniform.css" />
<link rel="stylesheet" href="css/select2.css" />
<link rel="stylesheet" href="css/fullcalendar.css" />
<link rel="stylesheet" href="css/maruti-style.css" />
<link rel="stylesheet" href="css/maruti-media.css" class="skin-color" />
<link rel="stylesheet" type="text/css" href="css/z-mbcrs.css">
<!-- x-editable -->
<link href="bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet"/>

<body>
 <table class="table table-bordered data-table">
   <thead>
    <tr>
      <td>ID</td>
      <td>Column1</td>
      <td>Column2</td>
    </tr>
   </thead>

   <tbody id="table-data">
   </tbody>

  </table>

<script src="js/jquery.min.js"></script> 
<script src="js/jquery.ui.custom.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/jquery.uniform.js"></script> 
<script src="js/select2.min.js"></script> 
<script src="js/maruti.js"></script> 
<script src="js/maruti.tables.js"></script>
<script src="js/jquery.dataTables.min.js"></script> 
<script src="bootstrap-editable/js/bootstrap-editable.js"></script>
<script src="js/this-page-java.js"></script>
</body>
</html>

this-page-java.js的内容

 $(document).ready(function(){
setInterval(function(){
    $("#table-data").load("fetch-data.php");
}, 3000);

$.fn.editable.defaults.mode = 'inline';
$('.col1').editable({   
    type:'POST',
    url:'post-data.php'
});
$('.col2').editable({   
    type:'POST',
    url:'post-data.php'
});

});

获取数据.php

include "connection.php";

$select = mysqli_query($con, "SELECT * FROM table");
while($res = mysqli_fetch_assoc($select))
{
$id = $res['ID'];
$col1 = $res['Col1'];
$col2 = $res['Col2'];

echo"
<td>".$id."</td>
<td><a href='#' class='col1' data-name='Col1' data-type='text' data-pk='".$id."' data-url='post-data.php' data-title='Enter code'>".$col1."</a></td>
<td><a href='#' class='col2' data-name='Col2' data-type='text' data-pk='".$id."' data-url='post-data.php' data-title='Enter code'>".$col2."</a></td>
";

}

【问题讨论】：

标签： javascript php jquery twitter-bootstrap x-editable

【解决方案1】：

这段代码：

$('.col1').editable({
  //...
});

在页面加载时执行一次。它将将此editable 插件应用到任何匹配的.col1 元素，该元素存在此代码运行时。它无法匹配尚不存在的元素。

每当您向页面添加.col1 元素的新实例时，您都需要为那些实例再次初始化此插件。最简单的方法是通过再次执行上述语句来重新初始化所有这些。

然而，if 对已经初始化的元素有任何不必要的副作用（这可能因插件而异，这不是通用规则），那么您需要获得更具体的目标仅新的.col1 元素已加载并需要使用插件进行初始化。如果是这种情况，那么您需要识别那些特定的元素。

因为看起来您只是替换给定父元素的全部内容：

$("#table-data").load("fetch-data.php");

然后您可以在选择器中包含该父元素以定位特定的新元素：

$('#table-data .col1').editable({
  //...
});

编辑：我看到上面可能不清楚的地方，你想在内容加载后初始化插件，这意味着在回调.load() .所以将两者放在一起可能看起来像这样：

$("#table-data").load("fetch-data.php", function () {
    $('#table-data .col1').editable({
        //...
    });
});

【讨论】：

你是说 javascript 在 $("#table-data").load("fetch-data.php"); 之前找到 $('.col1');已经加载了吗？我也尝试了你的建议，但它仍然不起作用。对不起。
@RFA：我是说它当那行代码执行时找到了.col1元素。如果尚未加载新元素，则它不会找到它们。你能详细说明你尝试了什么以及它是如何不起作用的吗？
我尝试使用 setInterval 函数......因为我从你那里得到了一个想法，如果我加载 $("#table-data").load("fetch-data.php" );然后应用 $('#table-data .col1').editable({ //... });它可能有效，而且确实有效。是否有任何代码尝试对 javascripts 的执行进行排序？
@RFA：我怀疑您在内容加载完成之前正在执行插件。刚刚编辑了答案来演示。您特别想初始化插件以响应内容加载，您不想同时执行它们，因为加载内容可能需要一些时间。（它是异步的。）

【解决方案2】：

您的 js 代码有错误。请检查以下代码。

$(document).ready(function(){
setInterval(function(){
    $("#table-data").load("fetch-data.php");
}, 3000);

$.fn.editable.defaults.mode = 'inline';
$('.col1').editable({    
    type:'POST',
    url:'post-data.php'
});
$('.col2').editable({   
    type:'POST',
    url:'post-data.php'
});

});

【讨论】：