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!!

Use the class selector (`$('.unoslider')`) instead of the ID selector? — Felix Kling, Jul 30 '13 at 09:00
Use `$('ul.unoslider')` instead. If you need to get the number portion of the ID in JS, simply use the substring of the ID attribute. — DaveRandom, Jul 30 '13 at 09:00
possible duplicate of [jquery or css selector? select all id's that start with](http://stackoverflow.com/questions/5002966/jquery-or-css-selector-select-all-ids-that-start-with) — Felix Kling, Jul 30 '13 at 09:02

score 0 · Answer 1 · answered Jul 30 '13 at 09:01

0

You can use this selector -

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

answered Jul 30 '13 at 09:01

Adil Shaikh

44,509
17
89
111

sroes · Accepted Answer · 2013-07-30T10:39:22.047

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.

How to initialise JQuery script for dynamically generated ids

2 Answers2