选择器返回undefined

Question

HTML

<form method="post">
    {% csrf_token %}
    <tr id = "{{ x.id }}">
        <td>{{ x.name }}</td>
        <td>{{ x.sth }}</td>
        <td>{{ x.sth_else }}</td>
        <td><button type="submit" name="edit_btn">edit</button></td>
    </tr>
</form>

的jQuery

$('form').on('submit', function(event){
    event.preventDefault();
    console.log("Executing script for edit button pressing")
    x = $(this).children().first().attr('id');
    console.log(x)
});

我试图从html中的tr中提取id，但每当我进入页面并看到控制台输出时，我得到：undefined。有什么想法吗？