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是正确的，因为您应该将点击事件附加到<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');
  });

这是working example。

当然，.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 )

...与此working example一样。

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

3 个答案: