CODEWITHSUNDEEP
jquery
Mahesh.D
Mahesh.D

Reputation: 1689

jQuery click event not firing for dialog button

I've login form as shown below,

<a href="#" id="loginLink">click Here to Log in</a>
<div class="formDiv" id="formDiv">
<form name="loginForm" id="loginForm" action="#">
    <label>Email</label><input type="text" name="email" id="email"><br/>
    <label>Passw</label><input type="password" name="pwd" id="pwd"><br/>
    <input type="submit" value="Log in" id="loginbtn" name="loginbtn">
</form>
</div>

I want to submit this form data using Ajax,for that when user clicks on #loginbtn I'm doing Ajax related stuff,but the trouble is click event not firing when clicks on #loginbtn,here is jsfiddle .

Upvotes: 1

Views: 5842

Answers (3)

Scary Wombat
Scary Wombat

Reputation: 44824

or you could create buttons within the dialog definition as in

 $( "#dialog-form" ).dialog({
  autoOpen: false,
  height: 300,
  width: 350,
  modal: true,
  buttons: {
    "Login": function() {
        alert('test');
        $( this ).dialog( "close" );
      }
    },
    Cancel: function() {
      $( this ).dialog( "close" );
    }
  },
  close: function() {
    allFields.val( "" ).removeClass( "ui-state-error" );
  }
});

Upvotes: 0

Tschitsch
Tschitsch

Reputation: 1338

Try to bind the click event like this:

$(document).on("click","#loginbtn",function(e){
// do stuff
})

Upvotes: 2

Rajesh
Rajesh

Reputation: 3778

Since the div which holds the dialog is dynamically added, you cannot bind click event to it. Bind it instead to some parent which is fixed like document.

I have edited the fiddle and it works: http://jsfiddle.net/WNMfA/2/

Upvotes: 4

Related Questions