Jquery - How to get click event within hidden div?

Question

I am using jquery and the action Im trying to get is when a person clicks a button I have it slide down a hidden div underneath it and display the hidden div. Inside that div there is a form field with a submit button. How would I go about listening for the event of someone clicking the submit button inside that div? I cant seem to get it to work:

UPDATE: This seem to work, let me know if this is the proper way:

$('.button.green.table').live('click',function() {

    var dataString = $(this).attr('title');

    $("#formdiv" + dataString).slideToggle("fast", function() {

    //Added, this works
            $(this).find('.button').click(function() {

    alert($('input[name$="notes"]').val());

    return false;

    });

        return false;

    });

});

EDIT SOME HTML:

<button class="button green table" title="1">Add Notes</button>
<div id="formdiv1">Notes<br /><input type="text" name="notes" value="12" />
<button class="button" id="buttontest">GO</button></div>

Try providing some html to help figure out what may be wrong here. — aknosis
– aknosis, Commented Oct 15, 2011 at 5:45
any reason for using live?, also alert($(this).(':input').val()); is not correct, could be your problem. — Matt
– Matt, Commented Oct 15, 2011 at 5:56
@John so you want the sibling to that button. You can do that or give an id to the input box. Also, look into delegate. Not a huge deal, but delegate is a little faster than live and in general just better to use. — Matt
– Matt, Commented Oct 15, 2011 at 5:59
@Matt Thanks. I asked about how to listen to click events from within html content served via an ajax call and was told on stackoverflow to use live. That is why I was using live. — John
– John, Commented Oct 15, 2011 at 6:01

griegs · Accepted Answer · 2011-10-15 06:14:18Z

1

I'd begin by taking the buttons click event out of the forms slideToggle event as it doesn't belong there.

also, are you sure the id's are correct once the page is rendered? I always use the class selector and never the Id because in asp.net the id's can change. you don't specify what you are using

edit

$("#formdiv" + dataString + " .button").click(function(){
  //your code here
});

or

$("#formdiv" + dataString + " .button").live("click",function(){
  //your code here
});

edited Oct 15, 2011 at 6:14

answered Oct 15, 2011 at 6:03

griegs

22.8k33 gold badges132 silver badges208 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

John Over a year ago

I updated the code that seems to work. Is that a good solution? If not what would be a better solution?

griegs Over a year ago

again, i'd take the click event out of the slide toggle as it doesn't really belong there. but other than that it looks ok. maybe also get rid of the find and just use the selector like ("#formdiv" + dataString + " .button")

John Over a year ago

You say remove it out of the slide toggle. Where should it go then? Be its own function? Or outside the slidetoggle but inside the live click of .button.green.table? Appreciate the help, still learning jquery.

Matt Over a year ago

@John outside the slide toggle

griegs Over a year ago

see my edit and yeah place it within the <script> tag as you would a normal JS function but without the function keyword. just as my edit is. and move dataString declaration out side the $('.button.green.table').live jQuery event too so the other event has access to it

Matt · Accepted Answer · 2011-10-15 06:36:46Z

0

Try something like this:

http://jsfiddle.net/nC67m/

Using the selector

$(':input[name=notes]', $('#formdiv' + dataString)).val()

I would recommend not doing it the way you are doing it though. I would actually use classes probably with some selection on the parent. This way it's more general and you can have as many as you want without selecting with an id. Simpler code as well.

So you could do something like:

http://jsfiddle.net/nC67m/1/

note delegate works just like live, but better.

edited Oct 15, 2011 at 6:36

answered Oct 15, 2011 at 6:05

Matt

7,2677 gold badges54 silver badges78 bronze badges

Collectives™ on Stack Overflow

Jquery - How to get click event within hidden div?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related