jquery - jeditable edit all sections?

Question

I am trying to figure out how to edit all the areas with a certain class with 1 edit button.

This is my JS: I threw it into a function to be used over again. I have a surrounding div and inside of it are spans with classes of "details"

How do I create 1 button "edit" and have them all trigger at one time? Trying to simulate the facebook effect where if you click a section the whole section becomes editable. Not sure how that is done.

function editProfileText(url, selector, type, data) {
      $(selector).editable(url, { 
        cssclass : 'inline-edit',
        //data   : data,
        id   : 'elementid',
        name : 'elementvalue',
        indicator : '<img src="/assets/images/ajax-loader.gif">',
        tooltip   : 'Click to edit...',
        submit: 'Save',
        event: "edit",
        //onblur : 'ignore',
        type: type

 });

 }   
    //Link for Text Only
    $('a.edit').live('click', function(){
        editProfileText("profile/editprofile", "span.detail" , "text", "");
        $(this).prev().trigger("edit");
    });

Solution:

function editProfileText(url, selector, type, data) {
          $(selector).editable(url, { 
            cssclass : 'inline-edit',
            //data   : data,
            id   : 'elementid',
            name : 'elementvalue',
            indicator : '<img src="/assets/images/ajax-loader.gif">',
            tooltip   : 'Click to edit...',
            submit: 'Save',
            event: "click",
            //onblur : 'ignore',
            type: type

     });

     }   
$('a.edit').live('click', function(){
        editProfileText("profile/editprofile", "span.detail" , "text", "");
         $('span.detail').trigger('click');
});

Answer 1

You can always use the 'edit' button to trigger the click event on the editable elements, e.g.:

$('a.edit').live('click', function(){
    $('input.edit').trigger('click');
});