昨天晚上，我想出了如何输出数据，将数据从索引页面上的表单发送到内容页面，然后将其结果显示在内容div内的索引页面上。
但是现在我有一个新问题。我的Javascript不会将其函数（renderGrid）应用于我的内容div，除非我弄乱了视口，因为那样window.addEventListener（“ resize”，renderGrid，false）; 发挥作用。
我不知道该怎么解释。
谢谢，
index.html
<form id="search_form" action="content.php" method="POST">
<input id="form_search" type="search" name="name">
<input id="form_submit" type="submit" name="submit" value="Enter">
</form>
<div id="content"></div>
js
$(document).ready(function(){
var form = $('#search_form');
form.submit(function(event){
var form_search = $('#form_search').val();
if($.trim(form_search) != '') {
$.post("content.php", {name: form_search}, function(data){
$('#content').html(data);
});
}
event.preventDefault();
});
});
function renderGrid(){
var blocks = document.getElementById("content").children;
var pad = 20, cols = 3, newleft, newtop;
for(var i = 1; i < blocks.length; i++){
if(i % cols == 0){
newtop = (blocks[i-cols].offsetTop + blocks[i-cols].offsetHeight) + pad;
blocks[i].style.top = newtop+"px";
}else{
if(blocks[i-cols]){
newtop = (blocks[i-cols].offsetTop + blocks[i-cols].offsetHeight) + pad;
blocks[i].style.top = newtop+"px";
}
newleft = (blocks[i-1].offsetLeft + blocks [i-1].offsetWidth) + pad;
blocks[i].style.left = newleft+"px";
}
}
}
window.addEventListener("load", renderGrid, false);
window.addEventListener("resize", renderGrid, false);
content.php
<?php
include ("connect.inc.php");
$userinput = $_POST['name'];
$query = "SELECT * FROM xxx WHERE xxx LIKE '%$userinput%'";
$result = mysqli_query($db_link, $query) or die(mysqli_error($db_link));
while($row = mysqli_fetch_assoc($result)){
?>
<article>
<?php echo $row['xxx'];?>
</article>
<?php
}
?>
图片1 =这就是它的作用。（当我提交俄罗斯时，查询将给我两个结果，但是正如您所看到的，这些结果现在在输出时彼此重叠。这是因为JavaScript尚未意识到，我已经输出了一些东西。）
load当您的对象（）完成加载时触发事件（如手册中所述）window。加载一些ajax内容时不会触发此事件。因此，您应该renderGrid显式调用：
$.post("content.php", {name: form_search}, function(data){
$('#content').html(data);
renderGrid();
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句