动态创建元素无法响应show/hide函数的技术求助

你遇到的问题核心原因是Ajax成功回调函数里的this指向已经不是触发事件的原元素了，导致$(this).data("seq")无法获取到正确的sequence值，自然找不到对应的输入框和文本元素，所以显示状态没有变化。下面给你几种解决方法，以及额外的验证步骤：

方法一：提前保存原元素的引用 #

在发起Ajax请求之前，把当前元素的引用存到一个变量里，这样在回调函数里就能正常访问它：

// 先保存当前元素的引用和sequence值
var $currentElement = $(this);
var targetSeq = $currentElement.data("seq");

$.ajax({
    url : '/section/projects',
    type: "GET",
    data: {
        "action": "update_deadline",
        "sequence": targetSeq,
        "deadline": $currentElement.val(),
    },
    success: function(data) {
        console.log("success");
        // 直接使用提前保存的sequence值
        $("#deadline_input_" + targetSeq).hide();
        $("#deadline_text_" + targetSeq).show();
    },
    error: function(err) {
        alert("There was an error updating the Project");
    }
});

方法二：设置Ajax的context选项 #

jQuery的Ajax配置里有个context参数，可以指定回调函数里this的指向，把它设为当前元素即可：

$.ajax({
    url : '/section/projects',
    type: "GET",
    context: this, // 关键：指定回调里的this指向触发事件的原元素
    data: {
        "action": "update_deadline",
        "sequence": $(this).data("seq"),
        "deadline": $(this).val(),
    },
    success: function(data) {
        console.log("success");
        // 现在这里的this就是原元素了，可以正常获取sequence值
        $("#deadline_input_" + $(this).data("seq")).hide();
        $("#deadline_text_" + $(this).data("seq")).show();
    },
    error: function(err) {
        alert("There was an error updating the Project");
    }
});

额外验证步骤 #

如果用了上面的方法还是没效果，可以做以下检查：

• 在success回调里打印targetSeq（或$(this).data("seq")）的值，确认它和你动态生成元素时的data[i].data.sequence完全一致；
• 打印$("#deadline_input_" + targetSeq)，看控制台输出的jQuery对象长度是否为1，确认元素确实存在（比如有没有拼写错误，deadline_input是否和生成时的id完全匹配）；
• 可以尝试直接写死一个已知的sequence值（比如$("#deadline_input_1").hide()），看是否能生效，排除选择器以外的问题。

内容的提问来源于stack exchange，提问作者charlie