How to move code to (and call) functions within your own custom jQuery plugin?
<p>I am writing a custom jQuery plugin to be able to edit a record in place. I have not done a lot of JavaScript, so I am not very familiar with how closures and objects work in JavaScript.</p>

<p>In a nutshell, this is how the script works:</p>

<ul>
<li>A user clicks on the edit link on a row.</li>
<li>An ajax call is made to get the HTML of the form.</li>
<li>The form HTML that is returned has a submit button and a cancel button.</li>
<li>When the cancel button is clicked, the form slides up.</li>
<li>When the submit button is clicked, the form is submitted (and validated) and slides up the table row when it is successful.</li>
</ul>

<p>The code below is what I have so far. I feel like many pieces can be moved to their own functions, but I'm not sure how to do it since I need to bind functions on html elements that are returned from the AJAX call.</p>

<p>How can I move some of my code into smaller functions?</p>

<pre><code>(function($){
    $.fn.editInPlace = function(params) {

        //set up default settings, and allow them to be overridden
        var config = $.extend({}, {
            editActionSelector: '.edit',
            deleteActionSelector: '.delete'
        }, params);

        //apply the functionality to all rows selected
        return this.each(function() {

            var $row = $(this);

            //prepare row
            $row.wrapInner('&lt;div class="data"&gt;&lt;/div&gt;');
            var $formWrapper = $('&lt;div class="form"&gt;&lt;/div&gt;').hide().appendTo($row);

            //when the user clicks the edit link
            $row.find(config.editActionSelector).click(function(e){

                e.preventDefault();
                if ($formWrapper.is(':visible')) {
                    return;
                }

                var url = $(this).attr('href');

                //load the edit form html
                $.get(url, function(data){
                    $formWrapper.html(data).slideDown(); //show the form

                    //when the user clicks the cancel button
                    $formWrapper.find('.cancel').click(function(e){
                        e.preventDefault();
                        $formWrapper.slideUp();
                    });

                    //when the user clicks the submit button
                    $formWrapper.find('form').submit(function(e){
                        e.preventDefault();
                        alert('form submitted');
                    });
                });
            });
        });
    };

})(jQuery);
</code></pre>

<h2>Update:</h2>

<p>I found this article helpful: <a href="http://phrogz.net/js/classes/OOPinJS.html" rel="nofollow">OOP in JS, Part 1: Public/Private Variables and Methods</a></p>

<p>If I understand correctly, you don't need to do anything fancy in order to create functions that are only accessible from within your plugin (private methods). You can simply create a function within your plugin and it will be private <strong>(please correct me if I am wrong)</strong>.</p>

<pre><code>(function($){

    $.fn.editInPlace = function(params) {

        var config = $.extend({}, {
            editActionSelector: '.edit',
            deleteActionSelector: '.delete'
        }, params);

        return this.each(function() {

            var $row = $(this);

            prepareRow($row);

            //...other code
        });

        //private function since it exists within another function
        function prepareRow($row) {
            $row.wrapInner('&lt;div class="data"&gt;&lt;/div&gt;');
            $('&lt;div class="form"&gt;&lt;/div&gt;').hide().appendTo($row);
        };
    };

})(jQuery);
</code></pre>

<p>However, I quickly noticed with this approach (with my current understanding) that I am passing all my variables to the private methods. I don't think this is the best way but I don't understand how to do otherwise.</p>
