I don't know if
the title explain this situation well. Below is a code i wrote to create div elements when
the button is pressed. Then By clicking on any of
the created divs, we can change
the div background by choosing a color from
the drop down box. However if i click on another div
and tried to change
the color by selecting another color from
the drop down,
the previously clicked divs also gets affected by
the new color. Why is this happening. I only want
the selected div to change color, without affecting
the previously clicked divs. I read allot of threads on this site, some of which talks about unbinding clicks, but I'm unable to solve
the problem. Thanks for
the help.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<style>
.aaa { width:100px; height:100px;background-color:#ccc;margin-bottom:5px;}
p{widht:500px; height:500px; margin:0px; padding:0px;border:2px solid red;color:#000;}
</style>
<select id="item_select" name="item">
<option value="1">red</option>
<option value="2">blue</option>
<option value="3">green</option>
</select>
<button>Click to create divs</button>
<p id="ptest"></p>
<script type="text/javascript">
var dividcount = 1;
$("button").click(run);
function run(){
var myDiv = $('<div id=lar'+dividcount+' class=aaa></div>');
$(myDiv).clone().appendTo('#ptest');
$(dividcount++);
$("div").bind('click',(function() {
var box = $("div").index(this);
var idd = (this.id);
$("#"+idd).text("div #"+idd);
$("select").change(function(){
var str= $("select option:selected").text();
$("#"+idd).css("background-color",str);
});
}));
};
</script>
