Question

I try to show and hide a div by the click of two different links. (Actually my page got a lot of these sections so I had to give them an ID).

my html looks like this

<div id="meta-503d22ceaf32609515000003" class="answer-form">
    <form action="..." method="...">
        <p>
            <textarea name=".."></textarea>
        </p>
        <p>
            <input type="submit" value=".."> 
            <a href="#" data-action="cancel" data-id="503526f7e8d08ecb0c000003">cancel</a>
        </p>
    </form>
</div>
<span class="content-nav">
    <a href="#" data-action="open" data-id="503d22ceaf32609515000003">open form</a>
</span>

I have a span content-navigation when I click the link with data-action=open it opens the form. This works jus fine. But when I click cancle it should hide/close/slide up this answer form div.

Here is my jQuery-Javascript:

$(document).ready(function() {

    $("a[data-action=open]").on('click', function(e) {
        var id = $(this).data('id');
        console.log($("div#meta-" + id));
        $("div#meta-" + id).slideDown('slow');
    });

    $("a[data-action=cancel]").on('click', function(e) {
        var id = $(this).data('id');
        console.log(id);
        console.log(e);
        console.log($("#meta-" + id));
    });

});​

in the second bind click method it retrieves the id but the query

$("#meta-"+id) 

does not find anything in the secound method while the same call finds something in the first method.

How can I find the form and close it? Is it a scope issue because the cancel call (binding) is nested inside the form?

What do I miss here?

Answer 1

If I am not mistaken, your Id for the cancel button looks different from the div Id