0

Updating some code base and having an issue I can't seem to conquer. Ive read the .on documentation and feel I have a decent enough understanding of it. The form is brought in via ajax.load when you sign in. No issue there. In a simple set up such as:

<div id="FXCMForm">
    <form action="processor.php" method="post" id="Form1">
        <ul>
            //other li's
            <input type="submit" id="Button1" value="Create License Key" />
            //other li's            
        </ul>
        <div id="Msg1" class="error"><a class="close">X</a><ul></ul></div>
    </form>
</div>

Old code using .live would be such as this

$("#Button1").live('click',function(){
$("#Form1").validate({
    errorContainer: "#Msg1",
    errorLabelContainer: "#Msg1 ul",
    errorElement: "li",
    submitHandler: function(form) {
        $('#prcs1').show();
        var dataString = $(form).serialize();
        $.ajax({
            //ajax success stuff
        } else {
             //ajax fail stuff
        }
    });return false;
    },
    rules: {//rules},
    messages: {//messages}
    });
});

Trying to use the new(ish) .on call like so 

$("#FXCMForm").on("click", "#Button1", function(event){
    $("#Form1").validate({
 //all other stuff here   
 });

Ive called the container which contains the dynamic elements #FXCMForm, the type of event "click" and the element triggering it "#Button1" but when I click, it just dumps the returned PHP data in a blank page, not doing any ajax stuff. Any ideas? Thank You

Dirty Bird Design
  • 5,333
  • 13
  • 64
  • 121
  • 1
    Your code should work, as long as the `#FXCMForm` element doesn't get replaced/removed. – Kevin B Feb 08 '13 at 22:07
  • Edit: after this line `$("#FXCMForm").on("click", "#Button1", function(event){` add: `event.preventDefault();` – David Feb 08 '13 at 22:07

1 Answers1

0

Apparently using "body" as the root element does the trick. hmmm

Dirty Bird Design
  • 5,333
  • 13
  • 64
  • 121
  • That means your `#FXCMForm` element is dynamic (gets replaced or removed, doesn't exist when event is bound) – Kevin B Feb 08 '13 at 22:08
  • Ah - if the container #FXCMForm is brought in with the ajax too, that is dynamic and thus binding events to it is lost. You need something that isn't dynamic so you can bind the events to it. – David Feb 08 '13 at 22:10
  • I just went up one level in the DOM and found the main containing div and it works. Greatly appreciate your help KevinB and David – Dirty Bird Design Feb 08 '13 at 22:16