JQuery wrong ID in an inner click

I'm trying to make a colorpicker. Where you got a few colorcubes with the class colorcube. When clicking, it opens a colorpicker with a few list items who all have a different color. When clicking on a list items it should return de color/text to de colorcube.

The first colorpick after the document is ready works. But after that it doesnt work properly, because it remembers al the previous colorcube ID's so al the other cube's will also change :(

Is there a way to clear cache or something like that?

$('.colorcube').click(function() {
    var colorcubeid = $(this).attr("id");
    $('#choicecolor').show();

    $(".li_color").click(function() {
        var colorid = "#" + this.id;
        var colorli = $(colorid).text();
        $('#' + colorcubeid).text(colorli);
        $('#' + colorcubeid).css({ 'background-color': '' + colorli + '' });
        $('#choicecolor').hide();
        savecolor(开发者_如何学Python);
    });

});

You're assigning redundant click event handlers with every click on colorcube. You should assign the handlers only once.

It seems like you're doing this in order to reference the ID of the colorcube that was clicked. You could use a variable instead to track which was clicked.

var $currentCube,
    $choiceColor = $('#choicecolor');

$('.colorcube').click(function() {
    $currentCube = $(this);
    $choiceColor.show();
});

$(".li_color").click(function() {
    var colorli = $(this).text();
    $currentCube.text(colorli)
                .css({ 'background-color': colorli });
    $choiceColor.hide();
    savecolor();
});

I made a number of changes as well.

Instead of referencing just the ID of the current color cube, I'm referencing the actual element wrapped in a jQuery object, so you can just call methods on it directly.

This code:

var colorid = "#" + this.id;
var colorli = $(colorid).text();

...is much more complex than needed, since you can just do:

var colorli = $(this).text();

...where this is the <li> that was clicked.

You don't need:

'' + colorli + ''

because colorli is already a String. Just do

.css({ 'background-color': colorli })

As @Šime Vidas noted, you should cache the $('#choicecolor'); so that you're not constantly selecting it from the DOM.

var $currentCube,
    $choiceColor = $('#choicecolor');

I also used chaining on this line. With jQuery you don't really need to separate your function calls against the same jQuery object. They can be chained together.

$currentCube.text(colorli)
            .css({ 'background-color': colorli });

I am trying to untangle why you need the nested click functions. Seems like you should be able to un-nest them. You may have to add a bit of jquery to get the 'colorcubeid' in the second function.

I believe what is happening is that the 'colorcubeid' variable is in the scope of the inner click function and is never being updated.

Bob

You need to unbind your previous click-handlers, so that they won't be called again.

However I would recommend to avoid that and create a clean instance of the #choicecolor via jQuery templates or similar approaches - saves you a lot of headaches if you do not recycle your control over and over again.