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;
- $(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;
- $('.footer3col_full').append('<ul>Test</ul><ul>Test 2</ul><ul>Test 3</ul>');
$('.footer3col_full').roundabout('init');
$('ul').roundabout({});
- $('.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);
- <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>