How to use bootstrap Collapse on this dynamic page?

Asked

Viewed 615 times

1

I have this screen to insert images in the system, the part of the insertion works right, only I want that when clicking an image, appear the edit button as in the image, and if you click again on this image, I want the button sum, I saw this so-called bootstrap Collapse, and I decided to try, but I’m not getting to make it workinserir a descrição da imagem aqui

what I did was this, html is created dynamically as in the code below: 

                var reader = new FileReader();
                reader.onload = (function(imageFile){
                    return function(e){
                        //Render Thumnails
                        var li = $('<li/>',{class:"col-xs-12 col-sm-6 col-md-3 col-lg-3"});
                        var a = $('<a/>',{
                            href:"javascript:void(0)",
                            class:"thumbnail"
                        });
                        var button = $('<button/>',{
                            class:"btn btn-success collapse",
                            type:"button",
                            id:"teste",
                            html:"Editar"
                        });
                        var image = $('<img/>',{
                            toggle:"collapse",
                            target:"#teste",
                            src:e.target.result,
                            title:escape(imageFile.name)
                        }).appendTo(a).click(function(){
                            $('#imageList').data('current', $(this).attr('src'));
                            //alert($(this).attr('src'));
                            image_x = ($(this).attr('src'));
                                li.append(button).appendTo($('#imageList'));
                            });
                        li.append(a).appendTo($('#imageList'));
                    }
                })(f);
javascript jquery html twitter-bootstrap

1 answer

1

You can use the jQuery toggle method that serves to display or hide the elements.

How the code is generated dynamically user o . on

Example:

<!DOCTYPE html>
<html>
<head>
    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
      jQuery(document).ready(function($) {
        $("button").on( "click", function() {
            $( "p" ).toggle("slow");
        });     
      });
    </script>

</head>
<body>

    <div>
        <button>Toggle 'em</button>
        <p>Hiya</p>
        <p>Such interesting text, eh?</p>
    </div>

</body>
</html>

References:

http://api.jquery.com/toggle/

http://api.jquery.com/on/

  • use the on with what? with the click or with the toggle? I could not understand this well for my case...

Browser other questions tagged javascript jquery html twitter-bootstrap

You are not signed in. Login or sign up in order to post.