JQuery OnClick not working when a button is clicked

Question

I have a naqvigation button that when clicked should load another html page into a div with the class "main" and to do this I added an onclicklistener with JQuery. Here is the JQuery Code:

$('WOFButton').on('click', function(event) {
    alert("clicked");
    $('.Main').load('wof.html');
});

However, when I click the button nothing happens. No error messages, nothing. Thanks in advance!

Answer 1

Your query selector is $('WOFButton').

So jQuery is looking for an element with a tag WOFButton

It is highly unlikely your HTML contains a tag that looks like this:

<WOFButton></WOFButton>

If you meant to get the element with Id of WOFButton

// bind <input id="WOFButton" type="button" />
$('#WOFButton').on('click', function(event) {
    alert("clicked");
    $('.Main').load('wof.html');
});

If you meant to get it with the class attribute WOFButton then:

// bind <input class="WOFButton" type="button" />
$('.WOFButton').on('click', function(event) {
    alert("clicked");
    $('.Main').load('wof.html');
});

If you meant to get it by the name attribute WOFButton then:

// bind <input name="WOFButton" type="button" />
$('[name="WOFButton"]').on('click', function(event) {
    alert("clicked");
    $('.Main').load('wof.html');
});