Question

I have a function called taskButtonClick() that:

1. Sets the variable form to a clone.
2. Sets the variable formParent to the outer most div.
3. removes a parents div and it’s elements.

4. and replaces those removed elements with the form.

   function taskButtonClick() {
   $(".task-btn").click(function(){
       // Setting form to the clone I want to acces in .on()
       var form = $(this).closest('#form-to-date').clone(true);
       var formParent = $(this).closest('#date-container');
       $(this).closest('#form-to-date').remove();
           $(formParent).html('\
               <form>\
                   <fieldset>\
                   <legend>Task<button class="btn task-btn" id="exit- button"><img src="http://localhost/ia/assets/img/remove.png"></button></legend>\
                    <input type="text" class="span12 input-xlarge"  id="input01">\
                   <div class="control-group">\
                       <div class="controls">\
                       </div>\
                   </div>\
                   <div class="form-actions">\
                       <button class="btn btn-primary span12"  type="submit">Save changes</button>\
                   </div>\
                   </fieldset>\
               </form>\
               ');
   });
   }
   

There’s an exit button added with the form which I’ve created a .on() function for and attached a click handler. I’m trying to figure out a way to access the variable form(the clone) from within the .on function and replace the form with the previous content:

$("#date-container").on("click", "#exit-button", function(event){
alert("Exit Button Works.");
event.preventDefault();
    // Here's kind of what I'm going for
$(form).appendTo(formParent);
});

I’m not very familiar with jquery so please let me know if I can somehow better clarify.

Edit: Here's where I'm calling the funcitons:

$('document').ready(function(){
    setAjax();
    initialize();
    setDates();
    setButton(); 
    setActiveNav(); 
    taskButtonClick();
    removeButtonClicked();
});

Answer 1

Try declaring a global variable.

$(document).ready(function(){
       //Notice variable is outside of the event function. It can be accessed by other functions and events.
       var formParent = null;

       $(".task-btn").click(function(){
    // Setting form to the clone I want to acces in .on()
    var form = $(this).closest('#form-to-date').clone(true);
    formParent = $(this).closest('#date-container');
    $(this).closest('#form-to-date').remove();
        $(formParent).html('\
            <form>\
                <fieldset>\
                <legend>Task<button class="btn task-btn" id="exit- button"><img src="http://localhost/ia/assets/img/remove.png"></button></legend>\
                 <input type="text" class="span12 input-xlarge"  id="input01">\
                <div class="control-group">\
                    <div class="controls">\
                    </div>\
                </div>\
                <div class="form-actions">\
                    <button class="btn btn-primary span12"  type="submit">Save changes</button>\
                </div>\
                </fieldset>\
            </form>\
            ');
     });
});