Target dynamically created id's?

[ReGGaeBOSS]

Hi, another thread by in a short amount of time:P

I create element with this:

var i = 1

    $("#addProduct").click(function () {
        
        $("<div />", {
            "class": "slider-wrapper",
            id: "wrapper" + i
        })
            .append($('<div />', {
            "class": "slider",
            id: "slider" + i
        })
            .append($("<input />", {
            type: "type",
            "class": "amount"
        })))
            .appendTo("#someContainer");
        i++;
});

How can I target the id’s?

$( "#wrapper"+i ) doesnt seem to work?

[RyanReese]

I don’t know if this is the issue but you’re mixing up the use of ’ and "

Look at the snippet you tried.
’
wrapper
"
+
i

The quotes are single / double. They differ.

[ReGGaeBOSS]

Ah yeah, that is just an example tho:

Here is a fiddle, i am trying to create jquery ui sliders by targetting dynamically created id’s

Edit fiddle - JSFiddle - Code Playground

[Paul_Wilkins]

Your i++ is messing things up. I would have i starting at 0 and move the i++ up to the very start of the function. That way your intention becomes crystal clear.

var i = 0;
$("#addProduct").click(function () {
    i++;
    ...
});

After that, the amount classname doesn’t have an index on it and doesn’t need one either. You can use ‘#slider1 .amount’ to target the desired element.

$('#slider' + i + ' .amount').attr(...);

You can help to make the above clearer too, by using a context selector with the id selector as a second parameter within which to search:

$('.amount', '#slider' + i).attr(...);

[ReGGaeBOSS]

Thanks, really helps, making progress=)

Here is how it looks atm:

Edit fiddle - JSFiddle - Code Playground

A problem still remains tho, add two or more sliders in the fiddle, and see how the value changes on all of them if you drag one slider, do you know how this could be fixed?

[Paul_Wilkins]

That is your slide and change functions causing the problem.

The this keyword in those functions will be the slider itself, such as #slider1 or #slider2, so you can use the same context selector technique as before for this.

$( ".amount", this ).val(...);

[ReGGaeBOSS]

You sir, are a hero.

Now to my next problem…=)

As you can see in the fiddle( http://jsfiddle.net/0Lqw0bgx/78/ ), the sliders are created on a click event. However, I would also need these dynamically added sliders on another part of this project. However here i need one in every <div class="slider-outer"></div>

So say if I have two divs with the class=“slider-outer” I would get this:

<div class="slider-outer">
  <div class="slider-wrapper" id="wrapper1">
     <div class="slider" id="slider1">
     ...
    </div>
  </div>
</div>

<div class="slider-outer">
  <div class="slider-wrapper" id="wrapper2">
     <div class="slider" id="slider2">
     ...
    </div>
  </div>
</div>

Is this a big/hard change to my current code? My newbie jquery brain is thinking something in the lines of: http://jsfiddle.net/0Lqw0bgx/83/ which obviously aint working.

[Paul_Wilkins]

Before doing that can we get rid of all the unique identifiers? They’re not needed for the sliders to work at all:

$("#addSlider").click(function () {
    // create slider
    var slider = $('<div />', {
        "class": "slider"
    }).slider({
        value: 5,
        min: 1,
        max: 30,
        slide: function (event, ui) {
            $( ".amount", this ).val(ui.value);
        },
        change: function (event, ui) {
            $( ".amount", this ).attr('value', ui.value);
        }
    });
    
    // add slider
    $("<div />", {
        "class": "slider-wrapper"
    }).append(slider.append(
        $("<input />", {
            type: "type",
            "class": "amount",
            value: slider.slider('value')
        })
    ))
    .appendTo("#someContainer");
});

and demonstrated in this jsfiddle

[ReGGaeBOSS]

Thanks man very nice.

I am trying to get this done, adding it to all divs with a certain class, and i think its starting to work… except I got that “value changes in all inputs when dragging one slider”-issue again, can you see the problem?

Edit fiddle - JSFiddle - Code Playground

[Paul_Wilkins]

It sounds like something is trying to affect a global class name again.

/me checks your code

Yep - look at your slide and change functions.

// bad code
$(this).siblings($(".amount" ).val(ui.value));

What is happening here is that the inner part, the $(".amount" ).val(ui.value) is assigning a value to all classes that match.
Then after that the outer part, $(this).siblings(...); tries to find siblings using bad information.

What you want to do instead, is to get the appropriate sibling, and then set the value

$(this).siblings(...).val(...);

[ReGGaeBOSS]

Hmmm okey.

$(this).siblings('.amount').val(ui.value);

;)

[ReGGaeBOSS]

EDIT: Got everything working, thanks a lot for the help!

[Paul_Wilkins]

Okay, I see what the problem is.

The insertAfter(selector) and insertBefore(selector) methods don’t work like the $(selector, context) one.
When you give insertAfter a selector of '.first-text' it will insert that thing after all of those selectors. If you have 10 sliders on the page you will then end up with 100 of the things.

So, giving it a straight selector is not the answer.

Instead of giving it '.first-text' there is another solution. You can give insertAfter a $(selector, context) reference instead, which would look like:

slider.insertAfter($(..., ...));

The same thing has to be done with the insertBefore as well.

You know what the selector is, and I think that you can guess what the context has to be.

[ReGGaeBOSS]

Thanks again, works fine=)