Binding a plugin init to dynamically generated HTML

Binding a plugin init to dynamically generated HTML

Hi All,

I'm using the excellent roundabout carousel plugin (http://fredhq.com/projects/roundabout/) which works great until I dynamically create the ul's I want to use;

My code is;
  1. $(document).ready(function() {
                $('.footer3col_full').append('<ul>Test</ul><ul>Test 2</ul><ul>Test 3</ul>');
                $('ul').roundabout({});
            });




I have tried a number of ways to bind the plugin's init using .on() and .bind(), but nothing seems to work, all I get is standard bullet points;

  1.             $('.footer3col_full').append('<ul>Test</ul><ul>Test 2</ul><ul>Test 3</ul>');
                $('.footer3col_full').roundabout('init');
                $('ul').roundabout({});


  1. $('.footer3col_full').append('<ul>Test</ul><ul>Test 2</ul><ul>Test 3</ul>').children('ul').roundabout();
How do I attach the dynamic ul's so that roundabout can see them?

The complete code is below (included is a DIV call test B which demonstrates the code working);
  1. <html>
        <head>
        <script src="jquery.min.js"></script>
        <script src="jquery.roundabout.min.js"></script>
        <script>
            $(document).ready(function() {
                $('.test').append('<ul>Test</ul><ul>Test 2</ul><ul>Test 3</ul>');
                $('ul').roundabout({});
            });
        </script>
        <style>
               .roundabout-holder {
                  list-style: none;
                  padding: 0;
                  margin: 0;
                  height: 5em;
                  width: 5em;
              }
               .roundabout-moveable-item {
                  height: 4em;
                  width: 4em;
                  cursor: pointer;
                  background-color: #ccc;
                  border: 1px solid #999;
               }
               .roundabout-in-focus {
                  cursor: auto;
               }
        </style>
        </head>
        <body>
            <div class="test">
            </div>
            <div>
            <h2>Test B</h2>
                <ul>
                    <li>Test B 1</li>
                    <li>Test B 2</li>
                    <li>Test B 3</li>
            </div>
        </body>
    </html>





















































    • Topic Participants

    • carl