Question

我的页面上有一个空白的div元素。当我按下一个按钮时，它将引入一个php文件来处理该表以显示在div中。仅应用了style.css的内容，而未应用jquery移动样式。

我尝试将样式表放入检索到的php页面中，这会使所有内容加载两次。

style.css：

#customers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even){background-color: #525252;}
#customers tr:hover {background-color: #aaa;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-image: -webkit-gradient(linear,left top,left bottom,from(#5393c5),to(#6facd5));
  color: white;
}

users.php：

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
  <script src="script.js"></script>
</head>

...

<div data-role="page">
  <div data-role="content" class="ui-content">
    <div class="ui-body ui-body-a ui-corner-all">

      <?php echo '<button class="getusers">Show Users</button><div id="dynamicUserTable">&nbsp;</div>';
    ?>

    </div>
  </div>
</div>

script.js：

$(document).ready(function() {
  $("button.getusers").click(function() {
    $("#dynamicUserTable").load("getusers.php");
  });
});

getusers.php：


$sql = "SELECT * FROM USERS";

$result = mysqli_query($conn,$sql);

echo "<div><table id=\"customers\">
<thead>
  <tr>
    <th>Name</th>
    <th>Email Address</th>
    <th>Mobile Phone</th>
    <th>Delete</th>
  </tr>
</thead>
<tbody>";

while($row = mysqli_fetch_array($result)) {
    echo "<tr>";
    echo "<td>" . $row['firstName'] . " " . $row['lastName'] . "</td>";
    echo "<td>" . $row['email'] . "</td>";
    echo "<td>" . $row['mobilePhone'] . "</td>";
    echo "<td>" . '<div class="ui-input-btn ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all">';
    echo '<input type="button" data-icon="delete" data-iconpos="notext" value="Icon only" onclick="deleteUser(\'' . $row["userID"] . '\')"></div>'
    echo "</td>";
    echo "</tr>";
}
echo "</tbody></table></div><br/>";

那个输入类型的按钮应该是一个带有X的小圆圈，但是我只是得到一个说“仅图标”的按钮。如果我将代码放在users.php中，该按钮将正常显示。但是，该表格在用户加载时按照我的style.css完美显示。

万一这很重要，并且因为我希望有人对此发表评论，我意识到我拥有旧版的jquery mobile和jquery，但这是我可以使某些持久菜单工作而不会闪烁工件的唯一方法，我正在尝试分别解决。

Answer 1

解决了此问题，问题是无法正确初始化jquery。

script.js：

$(function(){
    $( "[data-role='header'], [data-role='footer']" ).toolbar();
});

$(function(){
    $( "[data-role='header'], [data-role='footer']" ).toolbar({ theme: "a" });
});

如何将jquery CSS转换为动态加载的div元素内的元素？

1 个答案: