如何将click事件附加到以编程方式创建的jquery对象上？

Question

我正在编写一些jquery以编程方式构建链接列表，我想将click（）事件附加到每个链接。 我无法启动点击功能。 谁能为我指出正确的方法？

这是我到目前为止的内容：

<!doctype html>
<html>
<head>
<title></title>

<script type="text/javascript" src="helper/jquery-1.4.2.min.js"></script>  
<script type="text/javascript">                                         
$(document).ready(function() {
    var markup = '<li><a href="#myLink1">some link</a></li>';
    var $newLink = $(markup);
    $newLink.appendTo('.myLinks ul');
    $newLink.show();

    $("ul.myLinks li").click(function() {
        alert('hello');
    });
});
</script> 

</head>

<body>
  <div class="myLinks">
    <ul>
    </ul>
  </div>

</body>
</html>

Answer 1

您的错误在这里：

$("ul.myLinks li").click(function() {
    alert('hello');
});

应该是.myLinks ul li ，因为您的myLinks类位于<div> ，而不是<ul> 。

如果那仍然不起作用，那么Evgeny是正确的，因为您应该将click事件附加到您的<a>而不是它们包含的<li> 。

Answer 2

除了BoltClock所说的，看起来您正在将事件处理程序附加到列表项上，而不是将其附加到列表项中。 尝试$(".myLinks ul li a") 。

我还将测试选择器，以确保它返回您想要的东西。 在Firebug中逐步执行此操作或执行alert($(".myLinks ul li a")[0]);

Answer 3

您可以尝试这样的事情：

$('div.myLinks ul')
  .append( '<li><a href="#myLink1">some link</a></li>' )
  .delegate( 'a','click', function(e){
    e.preventDefault();
    alert('hi');
  });​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

这是一个有效的例子 。

当然， .append()更可能是一堆li －您可以通过多种方式构建它：

var $bunchOfLi = $('<li><a href="#myLink1">some link</a></li>')
  .add('<li><a href="#myLink2">another link</a></li>')
  .add('<li><a href="#myLink3">yet another link</a></li>');

...因此：

.append( $bunchOfLi )

...如本示例所示 。