AJAX:使用AJAX加载内容后,Javascript函数将不起作用


AJAX: Javascript function does not work after content is loaded using ajax

目前,我遇到了一个问题,在我使用ajax加载第一个内容后,我的javascript功能无法工作。我尝试了其他解决方案,但大多数都是jquery格式的。我的是javascript格式。我尝试创建一个简单的警报函数来测试是否正在调用该函数。但我最终得到了这个错误Uncaught ReferenceError: showArtistDetails is not defined实际上,函数已经在我的head标记的顶部定义了,但它仍然显示为未定义。我能知道有什么方法可以解决这个错误吗。

这是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");
    }
}

这是php代码:

    echo "<td onclick='"showArtistDetails(this.value)'">" . $row['CDTitle'] . "</td>";

在这个问题上我真的需要别人的帮助。大多数用户对jquery函数都有同样的问题,但我的不同。提前谢谢。非常感谢您的帮助。

您的代码似乎没有bug。我没有发现问题,请检查下面的代码
试着放在页面底部
并确保使用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脚本

<?php
    echo "<pre>";
    print_r($_REQUEST);
    echo "</pre>";
    exit;
?>

你说:"函数已经在我的头标签的顶部定义了"

我在head标签中只看到一个命名函数:showMusic(str)

showArtistDetails在哪里定义?