jquery - jQuery：查找元素

Question

我在这件小事上遇到了麻烦。我有一个看起来像这样的代码：

<table>.........
    <td>
        <span class="editable" id="name"><?= $name ?></span>
        <img class="edit_field" src="icons/edit.png"/>
    </td>
....... 
</table>

我想获取跨度的 id，以便我可以更改它（例如在其中添加一个输入框）。

我有这个：

$('.edit_field').live('click', function() {
    var td = $(this).parent();
    var span = td.find(".editable");
    alert(span.id)
});

但它不起作用......有什么想法吗？（我正在尝试这样做，所以它可以重复使用）

Answer 1

不要使用live()，因为它已被弃用。与 jQuery 1.7+ 一起用于.on()委托事件处理。

$('table tbody').on('click', '.edit_field', function() {
    var img = $(this) ;
    var td = img.parent();   // parent td ( if needed )
    var span = img.prev('span');  // previous span ( a jQuery object )
    alert( span.attr('id') ); // or span[0].id,here span[0] will gives an element
});

如果您.edit_field不是动态生成的，请使用：

$('.edit_field').on('click', function() {
    var img = $(this) ;
    var td = img.parent();   // parent td ( if needed 
    var span = img.prev('span');  // previous span ( a jQuery object )
    alert( span.attr('id') ); // or span[0].id,here span[0] will gives an element
});

笔记

不要id对多个元素使用相同的。我假设，你span在每一行都有id=name. 如果这是真的，那么使用class代替id.

Answer 2

试试这个http://jsfiddle.net/VPvSD/

$('table').on('click', '.edit_field', function() {
    var td = $(this).parent();
    var span = $(this).prev('span');
    alert(span.attr("id"));
});

Answer 3

试试这个：

  $('.edit_field').bind('click', function() {
   var td_id = $(this).parents('td').attr('id');
   alert(td_id);
  });

如果您使用 ID 而不是 class 会更好：

  $('#name').bind('click', function() {
   var td_id = $(this).parents('td').attr('id');
   alert(td_id);
  });

如果需要在上面添加一些html内容，那么：

  $('.edit_field').bind('click', function() {
   var added_html = "<input type='text' />";
   var td_id = $(this).parents('td').attr('id');
   $('#'+td_id).html(added_html);
   alert(td_id);
  });

对于这种情况，改为 live，最好使用 bind 或 on。