AJAX：使用ajax加载内容后，JavaScript函数不起作用
[英]AJAX: Javascript function does not work after content is loaded using ajax
问题描述
Currently, I am having problem where after i load my first content using ajax my javascript functiion is not working. 
目前，我在使用ajax加载我的第一个内容后我的javascript函数无法正常工作的问题。 I tried other solutions but most of them are in jquery format. 我尝试了其他解决方案，但大多数解决方案都是jquery格式。 Mine is in javascript format. 我的是javascript格式。 I have tried to create a simple alert function to test whether the function is being called. 我试图创建一个简单的警报函数来测试该函数是否正在被调用。 But i ended up getting this error Uncaught ReferenceError: showArtistDetails is not defined Actually the function is already defined at the top of my head tag but still its showing undefined. 但是我最终收到此错误Uncaught ReferenceError: showArtistDetails is not defined实际上，该功能已经在我的head标签的顶部定义，但仍显示未定义。 Can I know are there any ways to solve this error. 我可以知道有什么方法可以解决此错误。
This is the ajax code: 这是ajax代码：
function showArtistDetails(str) {
if (str == "") {
alert("hi");
document.getElementById("artist").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
alert("hi1");
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
alert("hi2");
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("artist").innerHTML = xmlhttp.responseText;
alert("hi3");
}
};
xmlhttp.open("GET","getArtist.php?title="+str,true);
alert("hi4");
xmlhttp.send();
alert("hi5");
}
}
This is the php code: 这是PHP代码：
echo "<td onclick=\"showArtistDetails(this.value)\">" . $row['CDTitle'] . "</td>";
I really need someones help on this problem. 我真的需要有人帮助解决这个问题。 Most of the users had the same problem with jquery function but mine is different. 大多数用户在使用jquery函数时遇到相同的问题，但我的却不同。 Thank you in advance. 先感谢您。 Helps are really appreciated. 帮助真的很感激。
2 个解决方案
解决方案1
0 2016-04-02 11:44:05
Your code seem bug free. 您的代码似乎没有错误。 i din't find issue, check bellow code. 我找不到问题，请检查下面的代码。
Try to place at bottom of page. 尝试放置在页面底部。
And make sure you use type="text/javascript" 并确保您使用type =“ text / javascript”
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Fanzine</title>
</head>
<body>
<div id="wholeThing">
<div id="binder">
<section id="content">
<article>
<header>
<hgroup>
<h1 style="text-align:center; font-size: 20px;">Tip Top Fanzine</h1>
</hgroup>
</header>
<p> <!-- Content -->
<div style="text-align:center;">
<select name="category" onchange="showMusic(this.value)"><option value='1'></option><option value='10'>Chamber</option><option value='11'>Classic Rock</option><option value='12'>Classical</option><option value='13'>Comedy</option><option value='14'>Contemporary Folk</option><option value='15'>Country</option><option value='16'>Cult</option><option value='17'>Death Metal</option><option value='18'>Easy Listening</option><option value='19'>Electronic</option><option value='2'>Acid Jazz</option><option value='20'>Electronica</option><option value='21'>Folk</option><option value='22'>Free Style</option><option value='23'>General Folk</option><option value='24'>General Rock</option><option value='25'>genre</option><option value='26'>Gothic</option><option value='27'>Jazz</option><option value='28'>Jungle/Drum 'N Bass</option><option value='29'>Keyboard</option><option value='3'>Alternative</option><option value='30'>Latin</option><option value='31'>Latin Rap</option><option value='32'>Louie</option><option value='33'>Medieval</option><option value='34'>misc</option><option value='35'>Miscellaneous</option><option value='36'>Mob Hits</option><option value='37'>New Age</option><option value='38'>New Wave</option><option value='39'>Oldies</option><option value='4'>Alternative Pop/Rock</option><option value='40'>Other</option><option value='41'>Pop</option><option value='42'>Pop/Rock</option><option value='43'>Progressive Folk</option><option value='44'>Psychedelic</option><option value='45'>Rap</option><option value='46'>Rap/R&B</option><option value='47'>Reggae</option><option value='48'>RnB</option><option value='49'>Rock</option><option value='5'>Ambient</option><option value='50'>Rock/Pop</option><option value='51'>RockNRoll</option><option value='52'>Roots Reggae</option><option value='53'>Soft Rock</option><option value='54'>Soul</option><option value='55'>Soundtrack</option><option value='56'>Techno</option><option value='57'>Traditional Folk</option><option value='58'>Traditional Pop</option><option value='59'>Trip-Hop</option><option value='6'>AvantGarde</option><option value='60'>Vocal</option><option value='61'>World</option><option value='62'>World Classical</option><option value='63'>Afro-Beat</option><option value='7'>Ballad</option><option value='8'>Bluegrass</option><option value='9'>Blues</option></select>
</div> </p>
<div id="albums"></div>
</article>
</section>
</div>
</div>
<script>
function showMusic(str) {
if (str == "") {
document.getElementById("albums").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("albums").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","getAlbums.php?q="+str,true);
xmlhttp.send();
}
}
</script>
</body>
</html>
PHP Script PHP脚本
<?php
echo "<pre>";
print_r($_REQUEST);
echo "</pre>";
exit;
?>
解决方案2
0 2016-04-02 12:33:34
You say: "the function is already defined at the top of my head tag" 您说：“该功能已经在我的head标签顶部定义了”
I only see one named function in the head tag: showMusic(str) 我只在head标签中看到一个命名函数： showMusic（str）
Where is showArtistDetails defined? showArtistDetails在哪里定义？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.