0

我有一个表中的行列表，当用户单击表中的单元格时，我试图使其可编辑。然后我的计划是发出 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 将其更改为输入字段一次。以下是该问题的分步说明：

  1. 用户单击表格单元格，该单元格工作正常，并且跨度被输入框替换。
  2. 然后，用户单击输入框，将输入框变成没有问题的跨度。
  3. 问题就在这里，如果用户试图单击返回到同一个表格单元格以再次编辑它，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 只在表格单元格上运行一次吗？

4

2 回答 2

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();
});

演示：小提琴

于 2013-08-08T12:56:49.523 回答
0

您正在将您的事件附加到页面中当前具有类 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() 文档以获取更多信息。

于 2013-08-08T13:06:15.750 回答