0

I'm updating the user posts via this code:

var auto_refresh = setInterval(function() 
{
    $('.contenido-publicaciones')
        .load("refresh_p.php?search_user="+search_user).fadeIn();
}, 2500 ); //Which is working.

1: <div class="contenido-publicaciones">, all the <div class="this-is-a-post"> div's from refresh.p.php load here every 2,5 seconds.

2: I have a textarea tag inside for each <div class="this-is-a-post"> that refreshes from refresh_p.php.

3: When <div class="contenido-publicaciones"> refreshes, it also refresh the textarea and prevent the user for typing.

4: All of the textareas have the class b_green

I want to clearInterval(auto_refresh) when the user clicks a textarea with the class b_green so another user can send a comment to that post.

I've tried the following:

$(".b_green").click(function(){ clearInterval(auto_refresh); }); // Didn't work, <div class="contenido-publicaciones"> keep refreshing.

$("textarea").click(function(){ clearInterval(auto_refresh); }); // Works only when i click a textarea that i have on the top of the page to send posts, but doesn't work when i click a textarea with the class b_green.

$(this).click(function(){ clearInterval(auto_refresh); }); //This works if i click on b_green textareas, but stop the Interval on every click that the user does on the page, I only want to stop on b_green textareas click.

Is there any error on my code? Any help would be appreciated.

Lee Taylor
  • 7,761
  • 16
  • 33
  • 49
Pepe Perez
  • 111
  • 1
  • 3
  • 10
  • What is the scope of your `var auto_refresh` assignment? is it local or global to the window – Ohgodwhy Jan 31 '14 at 23:48
  • looks like you need to use delegation since your `.b_green` textareas are being dynamically added. use [.on](http://api.jquery.com/on) to delegate the events from a static parent. – Patrick Evans Jan 31 '14 at 23:51
  • 2
    [Please read the Help so that you can format code properly next time you ask a question.](http://stackoverflow.com/editing-help) Also I think you have left out some important code. Where *exactly* is that first block of code that sets up the interval timer? – Pointy Jan 31 '14 at 23:52
  • possible duplicate of [adding jQuery click events to dynamically added content](http://stackoverflow.com/questions/852450/adding-jquery-click-events-to-dynamically-added-content) – Patrick Evans Feb 01 '14 at 00:02

2 Answers2

2

The clicks do not fire because at the time you are binding them there are no textareas or the ones that there are are latter replaced with new ones. These new textareas do not have the onclick handler attached.

You could do either of these:

  1. Add onclick="clearInterval(auto_refresh);" to the code of the textarea that backend sends and get something like:

    <textarea onclick="clearInterval(auto_refresh);"></textarea>

  2. Use on to bind the click handler to a higher element that remains on the page like so:

    $(".contenido-publicaciones").on('click', 'textarea', function(){
    clearInterval(auto_refresh);
});
Shadow The GPT Wizard
  • 66,030
  • 26
  • 140
  • 208
Majid Fouladpour
  • 29,356
  • 21
  • 76
  • 127
0

As I understood your loaded content contains all nodes which you are trying to handle by click.

If so . There is an issue. Because each time you get update you loose click handlers, because DOM has changed. as + you probably have memory leak here from previous "unreachable" handlers

Eugene P.
  • 2,645
  • 19
  • 23