Как прикрепить событие click к объекту jquery, созданному программно? - PullRequest
2 голосов
/ 01 сентября 2010

Я пишу некоторые 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>

Ответы [ 3 ]

2 голосов
/ 01 сентября 2010

Ваша ошибка здесь:

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

Это должно быть .myLinks ul li вместо этого, поскольку ваш myLinks класс относится к <div>, а не <ul>.

Если это все еще не работает, то Евгений прав в том, что вы должны прикреплять события клика к вашим <a> s, а не к содержащим <li> s.

1 голос
/ 01 сентября 2010

Вы можете попробовать что-то вроде этого:

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

Вот рабочий пример .

Конечно, .append() скорее всего будет кучейli s - то, что вы можете построить любым количеством способов:

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 )

... как в этом рабочем примере.

1 голос
/ 01 сентября 2010

В дополнение к тому, что сказал BoltClock, похоже, что вы прикрепляете обработчик событий к элементам списка, а не к гиперссылкам внутри них.Попробуйте $(".myLinks ul li a").

Я бы также проверил селектор, чтобы убедиться, что он возвращает то, что вы хотите.Пройдите через Firebug или сделайте что-то вроде alert($(".myLinks ul li a")[0]);

...