JavaScript: show and hide divs from a list of items working just once

Question

I have a list of links. When I click on them a sub layer shows, when I click back again this sub layer hides.

**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();                  
            }
        }); 
    }

It's working great. But when I click on the link inside of the sub layer, the link with the saveItem function, the function saves the link, reloads the results div and the show and hide layers won't work anymore.

No errors, just not working.

How do I rebind the showMore click ?? or how do I re-add the handlers? Sorry, I'm not quite fluent in javascript/jquery

Any ideas?

Thanks !!

EDIT: I've found the solution.

I just had to add:

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

after:

$.unblockUI();

in the saveItem function.

That easy ^_^

Seems you're setting event handlers in onload on the items, but when reloading them you remove the items with handlers and add new ones without. You never re-add the handlers. — Joachim Isaksson, Mar 27 '14 at 16:27
I take it all those links are within the results container? if so you will need to rebind the showMore click — Pete, Mar 27 '14 at 16:29
See this question http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-selectors Class names cannot start with a digit and must be 2 characters or longer. Try changing the ids to be something like `"show-more-{\d}"` and just get the corresponding div with `$('show-more-' + index)` — Juan Mendes, Mar 27 '14 at 16:52
How do I rebind the showMore click ?? or how do I re-add the handlers? Sorry, I'm not quite fluent in javascript/jquery :( — lleoun, Mar 28 '14 at 07:48
Try adding `$(".showMore").trigger("click");` at the end of `function saveItem`.. [About Trigger](http://api.jquery.com/trigger/) — Bhavik, Mar 28 '14 at 10:04

JavaScript: show and hide divs from a list of items working just once

0 Answers0