clicked要素を別の関数jqueryに変数として渡します

Question

以下のコードは、クリックしている要素がdivであることを前提としています。クリックされた要素が不明で、要素の型とIDを取得し、select change（）関数に渡して色を変更したい場合はどうなりますか？これを達成する最良の方法は何ですか？あなたが他の要素をクリックした場合、それはクビにしないように

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/base/jquery-ui.css" type="text/css" media="all" /> 
    <script src="http://code.jquery.com/jquery-1.4.4.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.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(function() { 
    var myDiv = $('<div id=lar' + dividcount + ' class=aaa></div>'); 
    $(myDiv).appendTo('#ptest'); 

    dividcount++; 
}); 

$('div').live('click', function() { 

    $('div').removeClass('selected'); 
    $('div').html(''); 

    $(this).addClass('selected'); 
    $(this).html('div #' + this.id); 
}); 

$('select').change(function() { 
    $('div').each(function() { 
     if ($(this).hasClass('selected')) { 
      var str = $("select option:selected").text(); 
      $(this).css("background-color", str); 
     } 
    }); 
}); 
</script> 

Answer 1

イベントがdiv要素にバインドされます。しかし、私はデリゲート関数を使用することを好むかもしれません。

var $ptest = $('#ptest'); 
$($ptest).delegate("div", 'click', function() { 

    $('div', $ptest).removeClass('selected'); 
    $('div', $ptest).html(''); 

    $(this).addClass('selected'); 
    $(this).html('div #' + this.id); 
}); 

これは、#ptest要素内で作成されたdivへのクリックイベントを制限します。 $('div', $ptest).html('');は、#ptest外のdivが空の操作の影響を受けないことを確認します。

fiddleには動作するサンプルが表示されます。