1

I made a page which is really similar to Facebook wall page: there are some posts, a list of comments for each post and a "send" button, for each post, to send a new comment.

In the following example:

  1. The post is identified with the class "mypost".
  2. The post-new-comment button is the div with class "send-comment".
  3. Once you scroll to the bottom, more posts are loaded dynamically with a script i didn't write here.
  4. When you click on "send-comment" a script is called and the comment is added to database.

Here is a portion of the page.

<!--my first post-->
<div id="div1" class="mypost">
    <div class="send-comment"></div>
</div>
<!--my second post-->
<div id="div2" class="mypost">
    <div class="send-comment"></div>
</div>

<!--my js code-->
<script text="type/javascript">
    $('.send-comment').click(function(){
        //send comment
    });
</script>

When the user scrolls down the page, other posts are injected into the page and this is the result:

<!--my first post-->
<div id="div1" class="mypost">
    <div class="send-comment"></div>
</div>
<!--my second post-->
<div id="div2" class="mypost">
    <div class="send-comment"></div>
</div>
<!--third post, added dynamically with jQuery-->
<div id="div3" class="mypost">
    <div class="send-comment"></div>
</div>

<!--my js code-->
<script text="type/javascript">
    $('.send-comment').click(function(){
        //send comment
    });
</script>

The problem is the following: The script to send comments is working like charm on the existing divs, but on every div added dynamically, nothing works. No clicks are detected. Nothing happens.

More generally, I can't find a way to make any kind of script work on divs (or any other html tag) added after a user action.

Cany anybody suggest a solution to fix this problem?

Alberto Fontana
  • 928
  • 1
  • 14
  • 35

1 Answers1

5

Try this:

<script text="type/javascript">
    $(document).on('click', '.send-comment', function(){
        //send comment
    });
</script>

on allows you to attach handlers to elements, even if they don't yet exist in the DOM. ref: http://api.jquery.com/on/

You might want to replace document from this binding function, it is usually overly broad.

Mister Epic
  • 16,295
  • 13
  • 76
  • 147
  • I think `$('body')` would be a more appropriate selector in a situation where you don't know the parent container. – Matthew Blancarte Nov 23 '13 at 19:43
  • Yes, so long as A) execution is deferred and B) the HTML document is valid and the `body` element exists - and everyone validates their HTML, right? :) I see a lot of examples that use `document` because, according to the docs: "The document element is available in the head of the document before loading any other HTML, so it is safe to attach events there without waiting for the document to be ready." – Mister Epic Nov 23 '13 at 19:47
  • From what I see above the closest parent is `.mypost` so ``. – Milan and Friends Nov 23 '13 at 20:59
  • Ideally you want to find a single common ancestor to all the elements you are binding an event on. `document` certainly isn't ideal, but neither is using multiple binding contexts. Whatever element is the parent to `#div1`, `#div2`, and `#div3` would be the ideal candidate, but that element wasn't shown. – Mister Epic Nov 23 '13 at 21:07
  • The post divs are inside a "content-div" which is inside a "center-column-div" which is inside a "wrapper" which is inside the . All these divs are always there and loaded with the page. So, what's the best candidate to bind the .on function? is still the document or the "content-div"? What are the differences? – Alberto Fontana Nov 24 '13 at 14:41
  • The closest common ancestor: `$(document).on('click', '#content-div', function(){` – Mister Epic Nov 24 '13 at 21:30