[英]Ajax loaded page refreshing when clicking on button
I load a page in a div through AJAX. 我通过AJAX在div中加载页面。 This works great. 这很好。 On this ajax loaded page there are some buttons (generally created with javascript). 在此ajax加载页面上,有一些按钮(通常使用javascript创建)。 When I click on one of these buttons the page refreshes. 当我单击这些按钮之一时,页面将刷新。 Weird thing is; 奇怪的是; no where I stated the page SHOULD refresh. 不,在我说过的页面应该刷新的地方。 Afterall; 毕竟; that's why I use ajax. 这就是为什么我使用ajax。
This is the javascript that's executed on the AJAX loaded page: 这是在AJAX加载页面上执行的javascript:
function buttonClicked(id){
var page = id;
photoPage = page*10;
if(cur_button < id)
{
minCount += 10;
maxCount += 10;
}
else
{
minCount -= 10;
maxCount -= 10;
}
cur_button = id;
jQuery("#imagesDiv").html("");
$( "#imagesDiv" ).append( " <br/>");
executePage();
}
function createButtons() {
var i = 1;
var button = "";
while(i <= photoCount)
{
var button = document.createElement("BUTTON");
var buttonName = document.createTextNode(i);
button.appendChild(buttonName);
button.id = i;
jQuery(button).bind('click', { id: i}, function(event) {
var data = event.data;
buttonClicked(data.id);
});
imagesDivJS.appendChild(button);
i++;
}
}
function executePage()
{
setImagesDivID();
createButtons();
$( ids ).append( " <br/>");
populateDiv();
}
function populateDiv() {
for(var i = minCount;i < maxCount; i++)
{
if(i < total_count)
{
create_image("../"+photos[i],photoAlts[i]);
$("#"+ids).append( "<p style=\"display:inline; padding-left:10px;\">" + photoTags[i] + "</p><br/>" );
}
}
}
Help will be appreciated. 帮助将不胜感激。 I've been breaking my neck around this thing! 我一直在为这件事而烦恼!
The button is refreshing the page because it is a submit button. 该按钮正在刷新页面,因为它是一个提交按钮。 You need to add an attribute of type="button"
to the button. 您需要向type="button"
添加type="button"
的属性。 For example: 例如:
function createButtons() {
var i = 1;
var button = "";
while(i <= photoCount)
{
var button = document.createElement("BUTTON");
var buttonName = document.createTextNode(i);
button.appendChild(buttonName);
button.id = i;
// Add type="button"
button.setAttribute("type", "button");
jQuery(button).bind('click', { id: i}, function(event) {
var data = event.data;
buttonClicked(data.id);
});
imagesDivJS.appendChild(button);
i++;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.