Jquery edit content from wysiwyg to iframe element

I need to be able to do the following:

1. click on the <span class="editable"> element contained in the iframe.
2. a popup with a TinyMCE wysiwyg comes up. content from the iframe "editable" element gets loaded into TinyMCE. I edit the content then hit save button.
3. New edited content gets updated on the iframe.

So far i have this (which works)

$(document).ready(function () {

    $("#template").contents().find(".editable").bind("click", function () {
        // get content of clicked item and insert it into wysiwyg
        $('#wysiwyg').html($(this).html());

        // give this element myedit id (this is so that I know which element i'm editing)
        $(this).attr('id', 'myedit');
    });

    // Wysiwyg
    $('#save').click(function () {
        // find element that i'm editing and update it's content with new content from wysiwy开发者_StackOverflow中文版g
        $("#template").contents().find("#myedit").html($('#wysiwyg').html());

        // remove editid
        $("#template").contents().find("#myedit").attr('id', '');
        return false;
    });


});

question: How would i do this without assigning myedit id back and forth? and just simply using $(this) somehow? so i would know that when finished editing $(this) would be updated with the new content.

thanks

With regards to the $(this) issue, you could do $(this).data('calledFrom',$(this)); and then referencing to it in the second .click() function: $('#wysiwyg').data('calledFrom').html($('#wysiwyg').html());

Code for option 1:

$(document).ready(function () {

  $("#template").contents().find(".editable").bind("click", function (e) {
    e.preventDefault();
    // get content of clicked item and insert it into wysiwyg
    $('#wysiwyg').html($(this).html());

    // give this element myedit id (this is so that I know which element i'm editing)
    $(this).data('calledFrom', $(this));
  });

  // Wysiwyg
  $('#save').click(function (e) {
    // find element that i'm editing and update it's content with new content from wysiwyg
    e.preventDefault();
    $('#wysiwyg').data('calledFrom').html($('#wysiwyg').html());

    return false;
  });

});

Option 2 (putting it all in one function):

$(document).ready(function () {
  $("#template").contents().find(".editable").bind("click", function (e) {
    e.preventDefault();
    $this = $(this);
    // get content of clicked item and insert it into wysiwyg
    $('#wysiwyg').html( $this.html() );
    $('#save').bind('click',function(e) {
      e.preventDefault();
      $(this).unbind('click');
      $this.html($('#wysiwyg').html());
    });
  });
});

Shorter, but less readable.

Not sure if this helps, but I hope it will!

P.S. always use e.preventDefault() instead or as well in your functions as it is supported by newer, more popular browsers