php - How to initialise JQuery script for dynamically generated ids

Question

EDIT:: My brain's smoking :) Perhaps I'm looking at this from the wrong angle? We need the JQuery to initialise for each dynamically generated id. Do we have to run the JQuery for each and every id (ie. place it in our PHP loop)??

How can we make this JQuery script apply to a dynamically generated list of ids where the ids increase by 1 when looped with PHP?

Here's the JQuery:

$(document).ready(function(){ 
    $('#slider').unoslider({
                scale: 'true', 
                responsive: 'true',
                touch: 'true',
                preset: 'bar_fade_left',
                navigation: {autohide: true},
                slideshow: {speed: 5, timer: false},
                animation: {delay: 200}
  }); 
}); 

And here the dynamically generated ids:

<?php echo "<ul id="slider'.$counter.'" class="unoslider">";?>

Thanks for any help!!

Answer 1

You can use this selector -

$('ul[id^="slider"].unoslider')

Answer 2

I created a simple plugin which lets me initialize elements based on data-* attributes:

<?php echo "<ul data-jquery-bind='unoslider' ".
    "data-jquery-options='" . htmlspecialchars(json_encode($unoSliderOptions), ENT_QUOTES) . "'>;"?>

Here is the plugin:

$.fn.jqueryBind = function() {
    return (this.length ? this : $('body')).each(function() {
        var $root = $(this);
        $root.find('[data-jquery-bind]').each(function() {
            var jqueryFn = $(this).attr('data-jquery-bind');
            var options = $(this).attr('data-jquery-options');
            if (options) {
                options = $.parseJSON(options);
            }
            $(this)[jqueryFn](options);
        });
    });
};

Then add:

$(function() {
    $.jqueryBind();
});

And it will automatically search for elements with the attribute data-jquery-bind and initialize the plugin using the json serialized options in data-jquery-options.