jquery - 显示/隐藏无法正常工作？

Question

我有一段 HTML:

        <div class="clearfix wanted_item">
            <div class="clearfix">
                <div class="float_right"><img src="images/pin.png"></div>
                <div class="float_right">
                    <h3>a</h3>
                    <div>abcd</div>
                </div>
            </div>
            <div class="float_right more_details" style="display: block;">
                                    <ul>
                    <li>some list</li>                  </ul>
                <div class="application_link">                      
                    <a class="orange_button" href="volunteer.php?volunteer_type=1"><span>apply</span></a>  
                </div>
            </div>
            <a class="float_left clearfix more_details_link" href="javascript:void(0);">Show details</a>
        </div>

我有这个 jQuery 代码:

$(".less_details_link").click(function() {
    $(this).parent().children(".more_details").slideUp(500);
    $(this).text("Show details");
    $(this).removeClass('less_details_link');
    $(this).addClass('more_details_link');
});
$(".more_details_link").click(function() {
    $(this).parent().children(".more_details").slideDown(500);
    $(this).text("Hide details");
    $(this).removeClass('more_details_link');
    $(this).addClass('less_details_link');
});

出于某种原因，当我单击“show”链接时它可以正常工作，我还可以看到它将类更改为 less_details_link 但第二个 click() 函数如果没有任何输出到控制台日志，则无法工作。当我点击“隐藏详细信息”链接时，它什么也没做。

Answer 1

jsFiddle Demo

这是因为当您向元素添加类时，它不会附带事件处理程序，除非您使用 on ( jQuery API: on ) 作为事件处理程序

$("body").on("click",".less_details_link",function() {
 $(this).parent().children(".more_details").slideUp(500);
 $(this).text("Show details");
 $(this).removeClass('less_details_link');
 $(this).addClass('more_details_link');
});
$("body").on("click",".more_details_link",function() {
 $(this).parent().children(".more_details").slideDown(500);
 $(this).text("Hide details");
 $(this).removeClass('more_details_link');
 $(this).addClass('less_details_link');
});