javascript - How to move code to (and call) functions within your own custom jQuery plugin? -

javascript - How to move code to (and call) functions within your own custom jQuery plugin? -

i writing custom jquery plugin able edit record in place. have not done lot of javascript, not familiar how closures , objects work in javascript.

in nutshell, how script works:

a user clicks on edit link on row. an ajax phone call made html of form. the form html returned has submit button , cancel button. when cancel button clicked, form slides up. when submit button clicked, form submitted (and validated) , slides table row when successful.

the code below have far. sense many pieces can moved own functions, i'm not sure how since need bind functions on html elements returned ajax call.

how can move of code smaller functions?

(function($){ $.fn.editinplace = function(params) { //set default settings, , allow them overridden var config = $.extend({}, { editactionselector: '.edit', deleteactionselector: '.delete' }, params); //apply functionality rows selected homecoming this.each(function() { var $row = $(this); //prepare row $row.wrapinner('<div class="data"></div>'); var $formwrapper = $('<div class="form"></div>').hide().appendto($row); //when user clicks edit link $row.find(config.editactionselector).click(function(e){ e.preventdefault(); if ($formwrapper.is(':visible')) { return; } var url = $(this).attr('href'); //load edit form html $.get(url, function(data){ $formwrapper.html(data).slidedown(); //show form //when user clicks cancel button $formwrapper.find('.cancel').click(function(e){ e.preventdefault(); $formwrapper.slideup(); }); //when user clicks submit button $formwrapper.find('form').submit(function(e){ e.preventdefault(); alert('form submitted'); }); }); }); }); }; })(jquery); update:

i found article helpful: oop in js, part 1: public/private variables , methods

if understand correctly, don't need fancy in order create functions accessible within plugin (private methods). can create function within plugin , private (please right me if wrong).

(function($){ $.fn.editinplace = function(params) { var config = $.extend({}, { editactionselector: '.edit', deleteactionselector: '.delete' }, params); homecoming this.each(function() { var $row = $(this); preparerow($row); //...other code }); //private function since exists within function function preparerow($row) { $row.wrapinner('<div class="data"></div>'); $('<div class="form"></div>').hide().appendto($row); }; }; })(jquery);

however, noticed approach (with current understanding) passing variables private methods. don't think best way don't understand how otherwise.

javascript jquery