jquery - Jquery没有在按钮单击时加载html页面

Question

我正在尝试使用 ajax 和 jquery 在单击按钮时加载 html 文件，但单击未加载它。下面是代码。

ajax.aspx 文件：-

<form id="form1" runat="server">
    <div id="dictionary"></div>
    <div class="letters">
        <div class="button" id="letter-a">
            <h3>A</h3>
            <button type="button">Load</button>
        </div>
        <div class="button" id="letter-b">
            <h3>B</h3>
            <button type="button">Load</button>
        </div>
        <div class="button" id="letter-c">
            <h3>C</h3>
            <button type="button">Load</button>
        </div>
        <div class="button" id="letter-d">
            <h3>D</h3>
            <button type="button">Load</button>
        </div>
    </div>
</form>

ajax.js 文件：-

$(document).ready(function () {
    $('#letter-a .button').click(function () {
        $('#dictionary').load('html_ajax.htm');
    });
});

但它不起作用。我错过了什么？提前致谢。

Answer 1

改变这个：

$('#letter-a .button').click(function () {

至

$('#letter-a button').click(function() {

您正在使用类选择器来选择button标签。您的选择器选择具有button类的元素。

Answer 2

我认为您需要删除 . 来自 .button - .button 表示具有一类按钮的东西。

这意味着“寻找一个id为“letter-a”和类为“button”的元素。

 $('#letter-a .button').click(function () { }

这意味着“查找包含在 ID 为“letter-a”的元素中的按钮元素。

$('#letter-a button').click(function () { }