CODEWITHSUNDEEP
phpjqueryhtmlforms
user1411607
user1411607

Reputation:

Form called in load request not working through jquery

I have set up a login system such as if you click on #log-in a tag in nav bar, a login screen is loaded in same page from a php login page, this system is now working on pure php post request, i want to it to working through jquery so i can check any user errorr too.

i am trying to implement jquery on it as normal but nothing is working with jquery, i.e form still is submitting through php.

html on every page

    <ul id="nav"><li id="log-in"><a href="../../login/">Log In</a></li></ul>

php login page

<div id="login">

<form name="login" action="../../login/index.php" method="post">
  <label>Username<input name="username" type="text" value="" /></label>
  <label>Password<input name="password" type="password" value="" /></label>
  <input type="submit" value="LogIn" id="login-join-submit"/>
</form>

</div><!--end of login->

Jquery

$('#log-in a').click(function() {

    $('#nav').append("<div id='background'></div><div id='wrapper'><div id='close'><p>Close[X]</p></div><div id='container'></div></div>");

    $('#container').load('../../login/index.php #login');

    $('#close p, #background').click(function() {
        $('#wrapper, #container, #close, #background').remove();
    });
    return false;
});

$('#login form[name=login]').submit(function(){
       alert('login');
       return false;
});

As you can see form login is loaded in #container and then jquery submission is applied to it, but it is not working through jquery but working through php.

Please see and suggest any possible way to do it.

Thanks.

Upvotes: 1

Views: 195

Answers (1)

Ram
Ram

Reputation: 144689

For dynamically generated elements, events should be delegated, from one of static parents of the element, or document object, you can use on method.

$(document).on('submit', '#login form[name=login]', function(){
     alert('login');
     return false;
});

Note that event for #background element should also be delegated:

$('#nav').on('click', '#background', function() {
    $('#wrapper').remove();
});

Upvotes: 1

Related Questions