Question

我有HTML代码段，看起来像这样。我从后端多次生成此代码段。当我单击“保存”按钮时，我会使用$（this）选择器捕获单击了“保存”按钮。现在我想获取相应Save按钮的属性item-id。我有以下jquery代码片段。但它不起作用。我试过看，但我不知道错误在哪里。

<td><input type="text" size="10" value="val1" item-id="id1"></td>
<td><input type="text" value="val2" size="4"></td> 
<td>
  <button class="btn btn-primary save-btn">Save</i></button>
</td>

这是jquery片段

 $(".save-btn").click(function(){
        var ems = $(this).parent().siblings();
       var item_id = ems[0].child().attr("item-id");
   }

Answer 1

更好地替换item-id =＆＃34; id1＆＃34;数据属性html5 data-id =＆＃34; id1＆＃34;然后将代码attr（＆＃39; item-id＆＃39;）替换为数据（＆＃39; id＆＃39;）...

＆＃13;

$(document).on('click','.save-btn', function(){
        var ems = $(this).parent().siblings(),
            item_id = ems.eq(0).children('input').attr("item-id");
             alert(item_id);
   });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
<td><input type="text" size="10" value="val1" item-id="id1"></td>
<td><input type="text" value="val2" size="4"></td> 
<td>
  <button class="btn btn-primary save-btn"><i>Save</i></button>
</td>
    </tr>
  </table>

＆＃13;

Answer 2

click无法处理动态添加的元素。您需要使用on('click')。此外，没有方法.child()，因此您需要使用.children().first()。

这是更正后的代码：

$(document).on('click', '.save-btn', function(){
   var ems = $(this).parent().siblings();
   var item_id = ems.children().first().attr("item-id");
});

＆＃13;

// The text
var text="";
text += "<td><input type=\"text\" size=\"10\" value=\"val1\" item-id=\"id1\"><\/td>";
text += "<td><input type=\"text\" value=\"val2\" size=\"4\"><\/td> ";
text += "<td>";
text += "  <button class=\"btn btn-primary save-btn\">Save<\/i><\/button>";
text += "<\/td>";


// Adding the text to html
$('body').html(text);


$(document).on('click', '.save-btn', function(){
    var ems = $(this).parent().siblings();
    console.log(ems);
    var item_id = ems.children().first().attr("item-id");
    alert(item_id);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

如何从元素列表中遍历dom树

2 个答案: