javascript - 显示已动态添加的跨度

Question

我问了一个关于向动态添加的元素添加点击事件的问题，我学会了使用 on() 来启用事件延迟。但是，我仍然遇到针对动态创建的内容的问题。特别是具有类 desc 的 span。

这是我添加动态内容的地方:

$('#jobs-list-2').append("<p><span class='job_title'>" + title + "</span><span class='job_title'>" + ", " + location + "</span><br/><span>" + "Department: " + dept + "</span></p>");
$('#jobs-list-2').append("<p class='desc'><span>" + description + "</span></p>");
$('#jobs-list-2').append("<span class='details_btn'>Click for Details</span>");

然后我将 click 事件分配给 details_btn 类:

$('#jobs-list-2').on("click", ".details_btn", function () {
      $(this).parent().closest('.desc').show();   
});

但是它似乎没有找到具有此类的元素并且没有显示任何内容。我不确定我该如何解决这个问题。

任何帮助将不胜感激。

Answer 1

您可以使用 $.prev 找到与 .desc 匹配的最接近的前一个兄弟:

$('#jobs-list-2').on("click", ".details_btn", function () {
      $(this).prev('.desc').show();   
});

您的代码不起作用，因为 $.closest 向上 遍历 DOM - $(this).parent().closest('.desc' ) 表示“查找当前元素的父元素的最近的 .desc 祖先”。

$(this).prev('.desc.') 表示“从当前元素开始，通过兄弟元素向后工作。选择第一个匹配 .desc 的元素”