How to use the bootstrap collapse in this dynamic page?

Question

How to use the bootstrap collapse in this dynamic page?

Navigation

#1 by (1 votes)

1

I have this screen to insert images in the system, the part of the insert works correctly, but I want that when clicking on an image, the edit button appears in the image, and if I click again on that image, this collapse of the bootstrap, and I decided to try, but I can not make it work

What I did was, html is dynamically created 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 html jquery twitter-bootstrap

asked by anonymous 12.03.2016 / 03:19

1 answer

Procedure to delete and then insert data Define the class of a li element created at runtime

score 1 · Answer 1

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

As 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:

link