Question

I am trying to load a html file at button click using ajax and jquery but click is not loading it.Below is the code.

ajax.aspx file:-

<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 file:-

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

But its not working. what i am missing?
Thanks in advance.

Answer 1

Change this:

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

to

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

You are using class selector for selecting the button tag. your selector selects the elements that have button class.