我有一个表中的行列表,当用户单击表中的单元格时,我试图使其可编辑。然后我的计划是发出 AJAX 请求来更新这些数据。
这是我的 HTML 示例:
<tr>
<td>3</td>
<td class="textFieldCell"><span class="textField" data-question-id="3">Is the instructor aware of their self development and self improvement areas they are working toward as part of their planned delivery and self peer or tutor assessment?</span></td>
<td class="sortOrderFieldCell"><span class="sortOrderField" data-question-id="3">3</span></td>
<td><a href="#" class="deleteQuestion" data-questionid="3">Delete Question</a></td>
</tr>
所以这里的想法是当用户点击表格中的跨度时,它被一个输入框替换,用户可以在其中更改数据,然后在模糊上进行 AJAX 调用。我对编写 AJAX 调用非常满意,但我遇到了一个问题,即框表单元格仅允许 jQuery 将其更改为输入字段一次。以下是该问题的分步说明:
- 用户单击表格单元格,该单元格工作正常,并且跨度被输入框替换。
- 然后,用户单击输入框,将输入框变成没有问题的跨度。
- 问题就在这里,如果用户试图单击返回到同一个表格单元格以再次编辑它,jQuery 就不会运行。
这是我的 jQuery:
jQuery('.sortOrderField').click(function() {
var input = jQuery('<input />', {'type': 'text', 'class': 'sortOrderField', 'name': 'aname', 'value': jQuery(this).html()});
jQuery(this).parent().append(input);
jQuery(this).remove();
input.focus();
jQuery('.sortOrderFieldCell input').blur(function() {
var html = "<span class='sortOrderField' data-question-id='3'>" + jQuery(this).val() + "</span>";
jQuery(this).parent().append(html);
jQuery(this).remove();
});
});
有人知道为什么这个 jQuery 只在表格单元格上运行一次吗?