Question

我遇到这个小东西的麻烦。我有一个看起来像这样的代码：

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

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

我有这个：

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

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

Answer 1

请勿使用live()，因为它已被弃用。使用.on()和jQuery 1.7+进行委托事件处理。

$('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而不是类，那会更好：

  $('#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);
  });

对于这种情况，相反，更好地使用bind或on。

jQuery：找一个元素

3 个答案:

注意