選項被點擊另一個元素時

Question

我試圖基於在下拉框下面的代碼（jsfiddle here）

HTML中指定的顏色來創建一個顏色選擇器：

<select id="colour" name="colour"> 
     <option value="000000">Black</option> 
     <option value="CCCCCC">Grey</option> 
     <option value="EAEAEA">Light Grey</option> 
</select> 

JS：

$(function() { 
     var $colourcontainer = '<div id="colour-palette"></div>'; 
     $('#colour').after($colourcontainer); 

     $('#colour option').each(function() { 
      $val = $(this).val(); 
      if($val) { 
       $('#colour-palette').append('<div class="colour" style="background-color:#'+$val+';"></div>').click(function() { 
        $('#colour:last').val($val); 
        alert($val); 
       }); 
      } 
     }); 
    }); 

我在被它越來越循環只有一次每個下拉選項，因爲現在它循環幾次，並增加了多個onclicks每個合作的問題陰沉。

Answer 1

它增加了多次點擊，因爲您在每次迭代（這裏是3次迭代）中將點擊處理程序綁定到#colour-palette。

更好的方法是創建.colour元素添加的顏色作爲數據屬性，然後使用上單擊處理程序分配的#colour-palette點擊事件.color元素的 試試這個：

$(function() { 
    var $colourcontainer = '<div id="colour-palette"></div>'; 
    $('#colour').after($colourcontainer); 

    $('#colour option').each(function() { 
     $val = $(this).val(); 
     if ($val) { 
      var colorEl = $('<div class="colour" style="background-color:#' + $val + ';"></div>'); 
      colorEl.data("bgColor", $val) 
      $('#colour-palette').append(colorEl); 
     } 
    }); 
    $('#colour-palette').on("click", ".colour", function() { 
     $('#colour').val($(this).data("bgColor")); 
    }); 
});​ 

工作JSFiddle：http://jsfiddle.net/Rf9L3/1/