ansaurus

Question

jQuery: child firing an event for its parent element

Answer 1

+8 A:

$(".clickme").click(function() {
    $(this).parent("div.main").toggle();
});

In regards to your second problem, you need to add:

$(this).unbind('click');

At the end of either of your toggle functions, and it will work as you intend. Good luck.

EDIT: in response to your latest problem, this should do it:

$(".abrefecha").click( function() {
    var that = this; // save this in that :)
    jQuery(this).parent().toggle(
        function () {
            var itemId = jQuery(this).attr("id");
            var itemIndex = $(".showhide").index(this);
            var currentItemHeight = b[itemIndex] + 30 + 'px'
            jQuery(this).css("overflow","auto");
            jQuery(this).animate( { height: currentItemHeight } , 500 );
            $(that).html('close'); // change html inside pink to 'close'
            $(this).unbind('click');
        },
        function () {
            jQuery(this).css("overflow","hidden")
            jQuery(this).animate( { height:"60px" } , 500 );
            $(that).html('abrefecha'); // change html back to 'abrefecha'
            $(this).unbind('click');
        }
    );
});

Paolo Bergantino 2009-01-16 01:13:51

Man, I can't tell you how much I owe you. Thank you, thank you, thank you, you saved my day (again!). Abraços.

Marcos Buarque 2009-01-20 05:17:04

Answer 2

A:

Hey! Thanks, it works! The only problem is that it creates sort of a queued effect. Do you know what I am talking about? When clicking the first time, it toggles once, that is the normal and desired output. The second time I click, it sort of keeps in memory the first click and it toggles open and close. The third time, it toggles open, close, open and so forth. I wonder if this is a problem with my code or I should just do something like cleaning a thread or whatever. I am posting the code just in case it helps. Thanks again.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd"&gt;
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;

  <script>
  $(document).ready(function(){

    // Global arrays.
    var a = [];
    var b = [];

    // Functions
    function disp(divs) {
     for (var i = 0; i < divs.length; i++) {
      a.push(divs[i].id);
      b.push(divs[i].offsetHeight);
     }
    }

    $(".abrefecha").click( function() {
     $(this).parent().toggle( 
      function () {
       var itemId = $(this).attr("id");
       var itemIndex = $(".showhide").index(this);
       var currentItemHeight = b[itemIndex] + 30 + 'px'

       $(this).css("overflow","auto");
       $(this).animate( { height: currentItemHeight } , 500 );
      },

      function () {
       $(this).css("overflow","hidden")
       $(this).animate( { height:"60px" } , 500 );
      }
     );

    });

    // Action
    disp( $(".showhide"));
    $(".showhide").css("height","60px")


  });
  </script>
  <style>
  div.showhide { position: relative; background:#de9a44; margin:3px; width:150px; overflow: hidden; display:block; }
  div.abrefecha { clear: both; position: absolute; bottom: 0; right: 0; z-index: 10; background-color: fuchsia;}
  </style>
</head>
<body>
  <div id="clickme">Click me!</div>
  <div id="mod345_1" class="showhide">E eu tenho muito texto aqui. Tenho muito conteúdo neste bloco. Eu preciso de muito muito texto e coisas demais... E eu tenho muito texto aqui. Tenho muito conteúdo neste bloco. Eu preciso de muito muito texto e coisas demais... <div class="abrefecha">abrefecha</div></div>
  <div id="mod345_2" class="showhide">Tenho muito conteúdo neste bloco. Eu preciso de muito muito texto e coisas demais...  E eu tenho muito texto aqui. Tenho muito conteúdo neste bloco. Eu preciso de muito muito texto e coisas demais...  E eu tenho muito texto aqui. <div class="abrefecha">abrefecha</div></div>
  <div id="mod345_3" class="showhide">E por fim não se esqueçam de mim porque estou aqui. E eu tenho muito texto aqui. E eu tenho muito texto aqui. E por fim não se esqueçam de mim porque estou aqui. E eu tenho muito texto aqui. E eu tenho muito texto aqui. hkdh kajhd kasjhd kasjhd aksjdh aksjhdaskjhd askjh askjdh askjdh askjh daskj <div class="abrefecha">abrefecha</div></div>

</body>
</html>

Marcos Buarque 2009-01-16 01:30:36

Mmm. Looking into it...

Paolo Bergantino 2009-01-16 01:46:22

Answer 3

A:

Hey! Thank you very much! It worked. I am sorry I can't vote for you. I don't have enough points yet.

Marcos Buarque 2009-01-16 03:53:12

No problem. If you want you can mark my answer as the "accepted answer" by clicking the check-mark to the left of my post.

Paolo Bergantino 2009-01-16 04:26:18

Answer 4

A:

The answer here was very helpful. Now I need to build more on the previous question. First time I posted, I needed to make a son fire an event for its parent element. Now, I must do both things. When clicking a single button in a layer, I need to change the text inside the button AND in the same click fire the sliding effect inside the parent container. I have been trying with no success.

Just in case, below is the updated code with the most recent changes applied... I just need to change the text inside the pink box and then when clicked again, the box will revert (toggle) to the original text. Thanks!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd"&gt;
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;

  <script>
  $(document).ready(function(){

    // Global arrays.
    var a = [];
    var b = [];

    // Functions
    function disp(divs) {
     for (var i = 0; i < divs.length; i++) {
      a.push(divs[i].id);
      b.push(divs[i].offsetHeight);
     }
    }

    $(".abrefecha").click( function() { 
     jQuery(this).parent().toggle(
      function () {
       var itemId = jQuery(this).attr("id");
       var itemIndex = $(".showhide").index(this);
       var currentItemHeight = b[itemIndex] + 30 + 'px'

       jQuery(this).css("overflow","auto");
       jQuery(this).animate( { height: currentItemHeight } , 500 );

       $(this).unbind('click');

      },

      function () {
       jQuery(this).css("overflow","hidden")
       jQuery(this).animate( { height:"60px" } , 500 );

       $(this).unbind('click');

      }
     );

    });

    // Action
    disp( jQuery(".showhide"));
    jQuery(".showhide").css("height","60px")


  });
  </script>
  <style>
  div.showhide { position: relative; background:#de9a44; margin:3px; width:150px; overflow: hidden; display:block; }
  div.abrefecha { clear: both; position: absolute; bottom: 0; right: 0; z-index: 10; background-color: fuchsia;}
  </style>
</head>
<body>
  <div id="clickme">Click me!</div>
  <div id="mod345_1" class="showhide">E eu tenho muito texto aqui. Tenho muito conteúdo neste bloco. Eu preciso de muito muito texto e coisas demais... E eu tenho muito texto aqui. Tenho muito conteúdo neste bloco. Eu preciso de muito muito texto e coisas demais... <div class="abrefecha">abrefecha</div></div>
  <div id="mod345_2" class="showhide">Tenho muito conteúdo neste bloco. Eu preciso de muito muito texto e coisas demais...  E eu tenho muito texto aqui. Tenho muito conteúdo neste bloco. Eu preciso de muito muito texto e coisas demais...  E eu tenho muito texto aqui. <div class="abrefecha">abrefecha</div></div>
  <div id="mod345_3" class="showhide">E por fim não se esqueçam de mim porque estou aqui. E eu tenho muito texto aqui. E eu tenho muito texto aqui. E por fim não se esqueçam de mim porque estou aqui. E eu tenho muito texto aqui. E eu tenho muito texto aqui. hkdh kajhd kasjhd kasjhd aksjdh aksjhdaskjhd askjh askjdh askjdh askjh daskj <div class="abrefecha">abrefecha</div></div>

</body>
</html>

Marcos Buarque 2009-01-20 04:57:32

I updated my answer to show you how to fix this.

Paolo Bergantino 2009-01-20 05:11:55

ansaurus

tags:

views:

answers:

jQuery: child firing an event for its parent element

related questions