unable to call jquery function on Click event

Question

i have a div where i am running a for loop. Which is creating the below divs based on the number of rows in the fields.

<div class="parent">
                <p style=" font-family: Times New Roman;color:#a0a0a0; ">
                        Content 1 goes here.........
                </p>
                <div class="child">
                        <span> <a class="likebtn">Like</a> </span>1 people like this     
                </div>
            <hr/>
 </div>

the above shown div is in a for-each loop i.e creating multiple divs same like this with different content on it.

Now i am trying to call my jquery function , if users click on any like button residing into the div. I tried the below function but my function is not getting call. Please help me , why regarding this issue.

<script type="text/javascript">         
        $('.parent .child .likebtn').click(function(e)
        { 
            alert("function called");
        });
</script>

And one thing,div's are created dynamically, if i write my above javascript code just after my for-each loop then my function is getting called. It's not good practice to write javascript function in Controller. I am using COdeigniter framework. Plase help me, i have to specify this function either in head or body

Is it dynamicly created by php or jQuery? The for-each term is confusing me. — Karl-André Gagnon
– Karl-André Gagnon, Commented May 10, 2013 at 14:52
@Karl-AndréGagnon Yes it is dynamically creating by php in my controller class I am using codeigniter framework. I added few points in my question above. Please read that. — Dan
– Dan, Commented May 10, 2013 at 14:53
May be parent is a reserved word....try to change the name of class parent to parento ...just for debugging — Hackerman
– Hackerman, Commented May 10, 2013 at 14:55
@Ashutosh jQuery doesn't care about how your server is structured, what karl meant was is the client being dynamically updated after the page has loaded with new content. My guess is yes, due to infinite scroll plugin. tymeJV's answer should fix it. — user400654
– user400654, Commented May 10, 2013 at 14:56

tymeJV · Accepted Answer · 2013-05-10 14:48:22Z

5

If the div's are created dynamically, call them like

$(document).on('click', '.parent .child .likebtn', function(e)
    { 
        alert("function called");
    });

answered May 10, 2013 at 14:48

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

5 Comments

Dan Over a year ago

Yes now its working. My divs are created dynamically i forget to say that. I want to know, why mention your function in this way if divs are created dynamically?

tymeJV Over a year ago

You can't assign a click handler to an element that doesn't exist yet (your elements aren't there on DOM ready). Look into "event delegation", this will help :)

user400654 Over a year ago

To add to tymeJV's comment, using the syntax in this answer actually binds the event to the document, which DOES exist, compared to the elements that don't exist yet that will trigger this event.

Dan Over a year ago

@tymeJV if you have time, can you explain it in little details, still i am half understood!

tymeJV Over a year ago

I would refer you to the API for this: api.jquery.com/on -- Has all the info you need.

Dan · Accepted Answer · 2013-05-10 14:59:50Z

1

Wrap your function in enclosure to make sure it gets executed after your DOM has fully loaded like so:

$(function() {
    $('.parent .child .likebtn').click(function(e) { 
        alert("function called");
    });
});

EDIT: Are you loading this content from AJAX? In this case you need to use the .on() function to make sure new dom elements get the events, syntax somethign like this: $(document).on(events, selector, data, handler); -> api.jquery.com/on

EDIT 2: Same answer as tymeJV

edited May 10, 2013 at 14:59

answered May 10, 2013 at 14:46

Dan

1,1111 gold badge9 silver badges30 bronze badges

3 Comments

user400654 Over a year ago

He doesn't need to since it's before the closing body tag.

Dan Over a year ago

I tried but its not getting called. And one thing, if i write my above javascript code just after my for-each loop then my function is getting called. It's not good practice to write javascript function in Controller. I am using COdeigniter framework. Plase help me, i have to specify this function either in head or body

Dan Over a year ago

Are you loading this content from AJAX? In this case you need to use the .on() function to make sure new dom elements get the events, syntax somethign like this: $(document).on(events, selector, data, handler); -> api.jquery.com/on

Collectives™ on Stack Overflow

unable to call jquery function on Click event

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related