javascript - 使用 jquery 在 div 中加载内容

Question

我在使用 jquery 时遇到了一些问题。我有一系列带有 href 属性的卡片，它们调用 php 页面并使用 get 方法发送属性。这是一个例子

    <div class="pers_genres_card">
<div class="card-panel teal_green">
    <span class="white-text"><a class="pers_href_white" target="_self" href="generatorgen.php?genre=Blues">Classica</a></span>
</div>
<div class="card-panel teal_orange">
    <span class="white-text"><a class="pers_href_white" href="generatorgen.php?genre=Blues">Blues</a></span>
</div>

现在我有一个中央 div，我想在不刷新页面的情况下加载我的 php 脚本的结果。这是我的 jquery 代码:

$(document).ready(function(){
    $('a.pers_href_white').click(function(){
        var page = $(this).attr('href');
        $('#central').load(page);
        return false;
    }
    });
});

但是当我尝试点击 href 时，结果显示在另一个页面中。简而言之，jquery 脚本不会启动，所以经典的 href 属性加载。我已经编写了另一个运行完美的 jquery 脚本，也比这个脚本更复杂，我不明白为什么它不起作用。

Answer 1

当您单击该链接时，浏览器将重定向到该链接。您必须主动阻止浏览器这样做。您可以使用 DOM 方法 event.preventDefault()为此。

将您的 JS 更改为以下内容，它应该可以工作:

$(document).ready(function(){
    $('a.pers_href_white').click(function(e){
        e.preventDefault();
        var page = $(this).attr('href');
        $('#central').load(page);
        return false;
    });
});