Question

我问了一个关于向动态添加元素添加点击事件的问题，我学会了使用on()来启用事件爆燃。但是，我仍然遇到针对动态创建内容的问题。具体而言是span，其中包含desc类。

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

$('#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

当你说

时

$(this).parent().closest('.desc').show();

它会寻找一个比#job-list-2更高的元素。所以你需要输入

$(this).siblings('.desc').show()

找到点击元素的sibling

希望这会有所帮助。

问候timmi

Answer 2

您可以使用$.prev查找与.desc匹配的最近的同级兄弟：

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

您的代码无效，因为$.closest遍历DOM 向上 - $(this).parent().closest('.desc')表示＆＃34;找到最近的.desc祖先当前元素的父母＆＃34;。

$(this).prev('.desc.')表示＆＃34;从当前元素开始，通过兄弟姐妹向后工作。选择与.desc匹配的第一个。＆＃34;

Answer 3

这样的事情？我改变了一些html的结构，并最初使用style="display:none;"隐藏了描述范围。另外，通过在段落.desc内点击对话描述的html周围切换html，你不需要使用.parent()或类似的东西。

$(document).ready(function() {
    var title = "TITLE HERE";
    var location = "THIS IS THE LOCATION";
    var dept = "something about DEPT";
    var description = "im describing something";
    $('#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 class='description' style='display:none;'>" + description + "</span><br/><span class='details_btn'>Click for Details</span></p>");
    
    $('#jobs-list-2').on("click", ".details_btn", function () {
        console.log('click');
        $(this).closest('.desc').find('.description').show();   
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="jobs-list-2">
</div>

Answer 4

从.append()开始，您似乎将.desc追加为#job-list-2的孩子，并试图将其作为其父级。因此，您应该将选择器更新为：

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

因此，一旦您点击.details_btn，其父级将为#job-list-2，.desc是其子级而非父级。 .closest()查找给定元素的父级。

工作小提琴：http://jsfiddle.net/qbf4q2m1/

显示已动态添加的范围

4 个答案: