Как получить jquery CSS для элементов внутри динамически загружаемого элемента div?
У меня есть страница с пустым элементом div. Когда я нажимаю кнопку, он открывает php-файл для обработки таблицы, отображаемой в div. Применяется только содержимое моего style.css, а мобильные стили jquery не применяются.
Я попытался поместить таблицы стилей на полученную php-страницу, и это заставило все загружаться дважды.
стиль.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;
}
пользователи.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"> </div>';
?>
</div>
</div>
</div>
скрипт.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, кнопка будет отображаться нормально. Однако таблица отлично отображается в соответствии с моим стилем.css, когда пользователь загружается.
В случае, если это имеет значение, и поскольку я ожидаю, что кто-то прокомментирует это, я понимаю, что у меня более старая версия jquery mobile и jquery, но это единственный способ заставить некоторые постоянные меню работать без мерцающих артефактов, и я пытаюсь устранить эту проблему. отдельно.
Есть ли проблема со смешанным содержимым протокола? Все ваши ссылки на CDN являются http: ? Что вы используете для своего сайта. Ошибки в консоли или при загрузке по сети?
@nitin9nair кажется.
@sscotti Я выбрал этот метод, но я полагаю, что мог бы загрузить их локально, я попробую, но я думаю, что пробовал это раньше, и это не помогло. Я не видел никаких ошибок в консоли, и, кажется, нет проблем с остальными функциями jquery на странице.
Ни один из них не является исправлением.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Решил, проблема была в неправильной инициализации jquery.
скрипт.js:
$(function(){
$( "[data-role='header'], [data-role='footer']" ).toolbar();
});
$(function(){
$( "[data-role='header'], [data-role='footer']" ).toolbar({ theme: "a" });
});
Правильная ли ссылка CDN - ` <link rel = "stylesheet" href = "code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> `?