übergeben angeklickt Element als Variable zu einer anderen Funktion jquery

Question

Der folgende Code geht davon aus, dass das Element, auf das wir klicken, ein div ist. Was ist, wenn das Element, auf das geklickt wurde, unbekannt ist und wir den Elementtyp und die ID abrufen und dann an die Funktion select change() übergeben möchten, um ihre Farbe zu ändern. Was ist der beste Weg, dies zu erreichen?

<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

Das Ereignis wird an div Elemente binded, damit es nicht gefeuert wird erhalten, wenn Sie auf einem anderen Element klicken. Aber ich bevorzuge es, die Delegate-Funktion zu verwenden.

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

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

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

Diese Grenze die Click-Ereignisse auf die im Inneren des #ptest Element erstellt divs. und die $('div', $ptest).html(''); stellt sicher, dass die divs außerhalb #ptest nicht durch den Entleerungsvorgang betroffen ist.

Sie können eine funktionierende Probe in diesem fiddle sehen.