Question

I am attempting to use the .clone() in jquery. I have a $.post retuning an id number i want to change in the cloned element. Is How do I use the .data if i’m cloning parents and children to change the id attribute? i also have an update bound to the select tag I want to keep after cloning.

HTML:

  <div id="basicinfobox">
   <table id="ethnicitytable">
     <tbody>
       <tr valign="top">
         <td>
           <img id="Ethnicity" ref="6" rel="ActorEthnicity" src="plussm.png">
         </td>
         <td id="ethnicity22">
           <select id="22" rel="ActorEthnicity" name="Ethnicity">
            <option value="">Ethnicity</option>
            <option value="Caribbean">Caribbean</option>
           </select>
           <img id="22" border="0" width="16" height="16" onclick="ethnicitydelete(this.id)" alt="Delete Ethnicity" src="deletessm.png">
          </td>
     </tr>
   </tbody>
  </table>
 </div>

Jquery:

$('#basicinfobox img[src*="plus"]').click(function(){
    var rel=$(this).attr('rel');
    alert(rel)
    var ref=$(this).attr('ref');
    alert(ref);
    //$('#ethnicitytable tr td:last').clone().appendTo('#ethnicitytable tr:last');
    $.post('add.php', {rel: rel}, function(id){
        var elem = $('#ethnicitytable tr td:last')[0];
                clone = elem.clone( true );
        jQuery.data(clone, "id", id);
        clone.appendTo('#ethnicitytable tr:last');
        //$('#ethnicitytable td:last').attr('id', 'ethnicity'+id);
        //$('#ethnicitytable select:last').attr('id', id);
        //$('#ethnicitytable img[src="deletessm.png"]:last').attr('id', id);
    })
})

Answer 1

$.post('add.php', {rel: rel}, function(id){
    var elem = $('#ethnicitytable tr td:last')[0];
    clone = elem.clone( true ).attr('id', 'yourNewId').appendTo('#ethnicitytable tr:last');
});

id is accessed with attr() or do you save an id in the element’s data object? then you’d use data(‘id’, ‘something’);