JavaScript:显示和隐藏仅使用一次的项目列表中的div

时间:2014-03-27 16:22:18

标签: javascript jquery html onclick click

我有一个链接列表。当我点击它们时,子图层会显示,当我再次单击该子图层时,会隐藏该子图层。

**HTML:**

    <!-- list of links-->
<div id="results">
    <a href="javascript:void(0);" class="showMore" id="1">Click to show more information about 1</a><br>
    <a href="javascript:void(0);" class="showMore" id="2">Click to show more information about 2</a><br>
    <a href="javascript:void(0);" class="showMore" id="3">Click to show more information about 3</a><br>
    <a href="javascript:void(0);" class="showMore" id="4">Click to show more information about 4</a><br>
    <!-- sub layers for each of the links -->
    <div class="1">about 1<br>
        <a onclick="javascript:saveItem('1'); return false;" href="javascript:return false;">Record info about 1</a>
    </div>
    <div class="2">about 2<br>
        <a onclick="javascript:saveItem('2'); return false;" href="javascript:return false;">Record info about 2</a>
    </div>
    <div class="3">about 3<br>
        <a onclick="javascript:saveItem('3'); return false;" href="javascript:return false;">Record info about 3</a>
    </div>
    <div class="4">about 4<br>
        <a onclick="javascript:saveItem('4'); return false;" href="javascript:return false;">Record info about 4</a>
    </div>

</div>

**JS:**


    $(document).ready(function() 
    {
        $(".showMore").click(function(e){
            $("." + e.currentTarget.id).toggle()
        });
    }); 

    function saveItem(id)
    {
        $.blockUI({ message: 'Loading ...'});
        theUrl = 'controller.php';

        $.ajax ({
            url: laUrl,
            data: params,
            type: "POST",
            async:true,
            success: function (data, textStatus)
            {   
                $('#results').html (data); 
                $.unblockUI();                  
            }
        }); 
    }

它运作良好。但是当我点击子图层内部的链接,带有saveItem函数的链接时,该函数会保存链接,重新加载结果div并且显示和隐藏图层不会工作了。

没有错误,只是没有工作。

如何重新绑定showMore点击?或者如何重新添加处理程序?对不起,我的javascript / jquery不太流利

有什么想法吗?

谢谢!!

编辑:我找到了解决方案。

我只需要添加:

  $(".showMore").click(function(e){
            $("." + e.currentTarget.id).toggle()
        });

之后:

$.unblockUI();

在saveItem函数中。

那很容易^ _ ^

0 个答案:

没有答案