有关Click的更多信息的JQuery更新框

Question

当用户点击链接但我的JQuery代码无效时，我正试图在框中显示更多信息。

HTML

<div id="box"></div>
<a id="info" href="#">More Information</a>

JQuery的

$('#info').onclick(function(event) {
    event.preventDefault();
    $('#box').text('Here is your information.');
});

Answer 1

您需要click而不是onclick：

$('#info').click(function(event) {
    event.preventDefault();
    $('#box').text('Here is your information.');
});

或使用on：

$('#info').on('click', function(event) {
    event.preventDefault();
    $('#box').text('Here is your information.');
});

作为@prash建议，在此处使用on()的更好方法通常称为event delegation

$('.parent').on('click','#info', function(){}) 

这将有助于确保click事件可以绑定到您的锚点，即使您的锚点已在以后动态添加。

Answer 2

你的JQuery应该是这样的：

$(document).ready(function() {
  $('#info').click(function(event) {
    event.preventDefault();
    $('#box').text('Here is your information.');
  });
});

请注意，该函数为click而非onclick。

Answer 3

.click是.on（'click'）

的快捷方式

使用.on获得更好的效果

$('#info').on('click', function(event) {
    event.preventDefault();
    $('#box').text('Here is your information.');
});