我在表格中有一个行列表,当用户点击表格中的单元格时,我试图使其可编辑。我的计划是让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调用非常满意,但我遇到的问题是,box表单元格只允许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只在表格单元格上运行一次?
答案 0 :(得分:1)
您需要在此处使用事件委派
jQuery(document).on('click', '.sortOrderField', 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(document).on('blur', '.sortOrderFieldCell input', function() {
var html = "<span class='sortOrderField' data-question-id='3'>" + jQuery(this).val() + "</span>";
jQuery(this).parent().append(html);
jQuery(this).remove();
});
演示:Fiddle
答案 1 :(得分:0)
您将事件附加到页面中当前具有sortOrderField类的所有项目。
然而,当你执行jQuery(this).remove();
时,你会从页面中删除元素,并且触发器随之而来。
为了保留触发器,您应该使用selector参数将其附加到父元素。这是一个例子:
jquery('table.editableTable').on( 'click', '.sortOrderField', 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('table.editableTable').on('blur', '.sortOrderFieldCell input', function() {
var html = "<span class='sortOrderField' data-question-id='3'>" + jQuery(this).val() + "</span>";
jQuery(this).parent().append(html);
jQuery(this).remove();
});
此示例假定您的行位于包含editableTable类的表中。此代码还假定您没有以新的方式向页面添加新表。
出于性能原因,我建议您将这些事件放在触发器将触发的元素的最近父元素上,以便最大限度地减少事件和元素搜索的冒泡工作,但这当然取决于页面有多大,你的表现有多么紧迫。
查看jquery .on() documentation以获取更多信息。