Проблема с использованием метода «parent» и ссылки «this» для ссылки на соответствующий элемент DOM - PullRequest
Новая
       45

Проблема с использованием метода «parent» и ссылки «this» для ссылки на соответствующий элемент DOM

1 голос
/ 27 февраля 2012

У меня проблемы со ссылками на соответствующие HTML-элементы с помощью ссылки "this" в javascript с использованием метода "parent". Предположим, мой HTML-код выглядит следующим образом: 

<ul id="list" >
  <li id="Template" >
    <a href="#" >
      <h3 class="Name" ></h3>
    </a>
    <a class="Link" ></a>
  </li>
</ul>

Используя jquery, я могу динамически создавать ссылки из элементов в списке: 

var jqXHR = $.getJSON( url, params, function(obj, status, xhr){
  var obj = jQuery.parseJSON(xhr.responseText);
  for (var i=0; i < obj.length; i++) 
  {
    var newEntryRow = $('#Template').clone();
    newEntryRow.removeAttr('id');
    newEntryRow.data('userID', obj[i].id);
    newEntryRow.appendTo('#list');
    newEntryRow.find('.Name').text(obj[i].user_name);
    newEntryRow.find('.Link').click(function(){
      var clickedUser = $(this).parent();
      var clickedUserID = clickedUser.data('userID');
    });
  }

Приведенный выше код назначит "id" каждой ссылке, созданной в списке (0, 1, 2 ...); тем не менее, jquery не работает для следующего HTML: 

 <ul id="list" >
  <li id="Template" >
    <a class="Link" >
      <h3 class="Name" ></h3>
    </a>
  </li>
</ul>

Второй фрагмент HTML также создает список из 5 ссылок «Имя»; однако jquery назначает «неопределенное» (в сравнении с действительным идентификатором - 0, 1, 2, 3, 4) каждой из ссылок, созданных в списке. Может кто-нибудь сказать мне, почему 2-й фрагмент HTML-кода не работает и как я могу изменить код JQuery так, чтобы ссылки были назначены действительный идентификатор (вместо "неопределенного")?

Спасибо!

Ответы [ 2 ]

1 голос
/ 27 февраля 2012 
$(function() {
    var lis = '';
    var a = [{
        "id": 1,
        "user_name": "user1",
        "user_url": "http://user1.com",
        "user_image": "http://cdn.com/user1.png"
    },
    {
        "id": 2,
        "user_name": "user2",
        "user_url": "http://user2.com",
        "user_image": "http://cdn.com/user2.png"
    },
    {
        "id": 3,
        "user_name": "user3",
        "user_url": "http://user3.com",
        "user_image": "http://cdn.com/user3.png"
    }];
    $.each(a, function(i, item) {
        lis += '<li id="user-' + item.id + '"><a href="' + item.user_url + '">' + '<img src="' + item.user_image + '" />' + '<h3>' + item.user_name + '</h3>' + '</a></li>';
    });
    $(lis).appendTo('#list');
    $('#list li a').on('click', function(e) {
        /* do something  */
    });
});

<ul id="list" data-role="listview"></ul>
1 голос
/ 27 февраля 2012

Может ли быть так, что текст "this" неверен? Но не уверен, почему первый будет работать, а не второй, потому что связь между ссылкой и атрибутом data-userId будет одинаковой?

В любом случае, это может помочь? http://api.jquery.com/jQuery.proxy/ вы можете обернуть обработчик щелчка, чтобы вы могли установить контекст this таким, какой хотите.

Вы можете установить для этого контекста новую строку, которая будет иметь атрибут data-userId.

Надеюсь, что поможет

Sam

...