jQuery onClick只在表单元格上运行一次。
jQuery onClick只在表单元格上运行一次。
提问于 2013-08-08 12:50:36
当用户单击表中的单元格时，表中有一个行列表，当用户单击该表中的单元格时，该列表将尝试使其可编辑。我的计划是然后发出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>因此，这里的想法是，当用户单击表中的span时，它将被一个输入框所取代，在输入框中，用户可以更改数据，然后在模糊的位置上进行AJAX调用。我对编写AJAX调用非常满意，但我遇到了一个问题，即box表单元格只允许jQuery将其更改为输入字段一次。下面是对这个问题的一步一步的描述：
- 用户在表格单元格上裁剪，该单元格工作良好，而span将被一个输入框替换。
- 然后，用户单击输入框，该输入框将输入框转换为没有任何问题的跨度。
- 问题就在这里，如果用户试图单击同一表格单元格再次编辑它，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只在一个表格单元格上运行一次吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-08-08 12:56:49
您需要在这里使用事件委托。
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();
});演示：小提琴
Stack Overflow用户
发布于 2013-08-08 13:06:15
将事件附加到当前具有类sortOrderField的页面中的所有项。
但是，在执行jQuery(this).remove();时，可以从页面中移除元素，并且触发器也会随之执行。
为了使触发器保持不变，应该使用选择器参数将其附加到父元素。下面是一个示例：
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()文档。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18126516
复制相关文章
相似问题
腾讯云开发者
