单击按钮时，JQuery OnClick无法正常工作

Question

我有一个naqvigation按钮，当单击该按钮时，应将另一个html页面加载到具有“ main”类的div中，为此，我在JQuery中添加了一个onclicklistener。 这是JQuery代码：

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

但是，当我单击按钮时，没有任何反应。 没有错误信息，什么都没有。 提前致谢！

Answer 1

您的查询选择器是$（'WOFButton'）。

因此，jQuery正在寻找带有标签WOFButton的元素

您的HTML极不可能包含如下所示的标记：

<WOFButton></WOFButton>

如果您打算使用WOFButton ID获取元素

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

如果要使用类属性WOFButton来获取它，则：

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

如果要通过名称属性WOFButton获得它，则：

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

Answer 2

我猜你的选择器是错误的。 当您使用它通过ID选择时，它应该以＃开头，例如$('#WOFButton') 。 此外，您的函数还需要调用event.preventDefault()函数以防止触发按钮的默认操作。

Answer 3

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <button class="WOFButton">WOFButton</button> 

您选择错误的方式是因为WOFButton不是标记，您可以按ID来选择它，例如#WOFButton或class .WOFButton现在可以正常工作了。