1

I´m having problems with a JQuery on click event over a dynamically created element.

The code created dynamically is this:

<div class="container rounded">
   <div class="message_area" style="background-color: #dff0d8;border:1px solid #d6e9c6; color: #3c763d">
       <button class="close" type="button">x</button>
            Ya esta suscrito a nuestras listas de envío, sus datos han sido actualizados.
   </div>
</div>

And I´m trying yo change the height of a container (class bloqFormulario) when the client click on the close button.

I have tried these options:

(function($){
    $(".close").click(function() {
        $(".bloqFormulario").height(200);   
    });
})(jQuery);



(function($){
    $(".message_area").on("click", "button", function() {
        $(".bloqFormulario").height(200);
    });
})(jQuery);

But I have no result.

Can you help me?

Thanks a lot.

mplungjan
  • 169,008
  • 28
  • 173
  • 236
morpheusrs
  • 11
  • 1
  • 2
  • If message_area is dynamically created too, you need to do something like `$(document).on("click",".close",function() {...});` – mplungjan Feb 21 '16 at 13:55

2 Answers2

3

use like this

$(function(){
    $(document).on("click",".close",function() {
         $('.bloqFormulario').css("height","200px");
    });
});

WORKING DEMO

rrk
  • 15,677
  • 4
  • 29
  • 45
Sajad Karuthedath
  • 14,987
  • 4
  • 32
  • 49
0

If you are using jQuery 1.7+ then you can do something like this:

$('body').on('click', 'button.close', function() {
    $(".bloqFormulario").height(200); 
});

If you are using jQuery version less than 1.7 then you need to register the click event for the close button after it is dynamically created. When the document is loaded and the button doesn't even exist then jQuery onclick event that you register will not work after the button is later added to the document, you have to bind the click event after the button is added to the document.

I'd add the dynamically created code like this:

<div class="container rounded">
   <div class="message_area" style="background-color: #dff0d8;border:1px solid #d6e9c6; color: #3c763d">
       <button class="close" type="button">x</button>
            Ya esta suscrito a nuestras listas de envío, sus datos han sido actualizados.
   </div>
   <script type="text/javascript">
      $(".close").click(function() {
         $(".bloqFormulario").height(200);   
      });
   </script>
</div>

Here the code is added and the click even is registered.

Sohrab
  • 120
  • 8