jquery - jquery中点击事件的问题

Question

不知道标题是否很好地解释了这种情况。下面是我编写的代码，用于在按下按钮时创建 div 元素。然后，通过单击任何创建的 div，我们可以通过从下拉框中选择颜色来更改 div 背景。但是，如果我单击另一个 div 并尝试通过从下拉列表中选择另一种颜色来更改颜色，则先前单击的 div 也会受到新颜色的影响。为什么会出现这种情况。我只希望选定的 div 改变颜色，而不影响之前单击的 div。我在这个网站上阅读了很多帖子，其中一些讨论了解除绑定(bind)点击，但我无法解决问题。感谢您的帮助。

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

Answer 1

我已经设置了一个 fiddle @ http://jsfiddle.net/BUghk/

你的代码让我的眼睛流血了。所以我冒昧地重写了它:)