Question

我在使用javascript＆＃34;这＆＃34;引用正确的html元素时遇到了问题。使用＆＃34; parent＆＃34;方法。假设我的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');
    });
  }

以上代码将分配一个＆＃34; id＆＃34;到列表中创建的每个链接（0,1,2 ......）;但是，jquery对以下html不起作用：

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

第二个html片段还会创建一个列表5＆＃34; Name＆＃34;链接;然而，jquery分配了一个＆＃34; undefined＆＃34; （与有效ID - 0,1,2,3,4相对应）列表中创建的每个链接。有人可以告诉我为什么第二个html片段不起作用以及我如何修改jquery代码以便链接分配有效ID（而不是＆＃34; undefined＆＃34;）？

谢谢！

Answer 1

可能是“这个”的含义是错误的。但不确定为什么第一个会工作而不是第二个因为link和data-userId属性之间的关系是相同的？

无论如何，这可能有帮助吗？ http://api.jquery.com/jQuery.proxy/您可以包含单击处理程序，以便您可以将“this”上下文设置为您想要的任何内容。

您可以将此上下文设置为具有data-userId属性的新行。

希望有所帮助

萨姆

Answer 2

$(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>

麻烦使用“父”方法和“this”引用来引用正确的DOM元素

2 个答案: