jQuery doesn't respond to my click event

Question

**DEVELOPMENT.JS**
jQuery(function ($) {
$("#doContact").click(function(e) {
    e.preventDefault();
    alert("ho"); // ---- It doesn't alert ----
    $("#contact-result").html('<img src="<%THEME%>images/loading.gif">');
    var formData = $("#registerForm").serialize();
    $.post("?page=register", formData, function(response)
    {
        if(response.status == 'success')
        {   
            $.modal.close();
            $('#register-success').modal({ opacity:80 });
        }
        else
        {
            $("#register-result").addClass('register-error');
            $("#register-result").html(response.error_message);
        }
    },'json');
});
});

**CONTACTFORM.HTML**
<form id="contactForm" action="#" method="post" class="centered stylish">
        <div id="contact-result">
            <div>
                <p><label for="username" class="label">Adınız:</label>
                <input id="username" placeholder="Adınız..." name="username" maxlength="20" type="text" tabindex="1" class="input" /></p>

                <p><label for="email" class="label">Email: (geri dönüş için gerekli)</label>
                <input id="email" placeholder="Email adresiniz..." name="email" maxlength="70" type="text" tabindex="2" autocomplete="off" class="input"/></p>

                <p><label for="message" class="label">Mesajınız:</label>
                <textarea id="message" placeholder="Mesajınız..." cols="60" rows="10" name="message" maxlength="1000" type="text" tabindex="2" autocomplete="off" class="input"/></p>

                <p>
                    <button id="doContact" class="ui-button button1" type="submit"> 
                        <span class="button-left">
                            <span class="button-right">Mesajımı Gönder</span>
                        </span>
                    </button>
                </p>
            </div>
        </div>
</form>

The problem is simple.

jQuery currently works for other divs which were placed on page load. (eg yellow login area at top right of navigation bar)

However, this form is loaded by an AJAX call so I believe I need to use functions like delegate or live . I don't know if that's the case, though.

Could you have a look?

Answer 1

Change this line:

$("#doContact").click(function(e) {

to this:

$("#contactForm").submit(function(e) {

Also change the button: <button id="doContact" to a submit button: <input type="submit">

EDIT: I am not sure how you're trying to accomplish this, but this how I would do it - this works:

<div id="output"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
    // 1. Load the form.html file, and grab the form with an id of '#contactForm'
    // 2. Insert the form with id '#contactForm' into the div with id '#output'
    // 3. Submit the form
    $('#output').load('form.html #contactForm', function (html, status, xhr) {
        $('#contactForm').submit(function(e) {
            e.preventDefault();
            alert('Form has been submitted!');
        });
    });
</script>

Your form.html

<div class="leftArea centered"> 
    <h2>İletişim</h2>
    <form id="contactForm" action="#" method="post" class="centered stylish">
            <div>
                <p><label for="username" class="label">Adınız:</label>
                <input id="username" placeholder="Adınız..." name="username" maxlength="20" type="text" tabindex="1" class="input" /></p>

                <p><label for="email" class="label">Email: (geri dönüş için gerekli)</label>
                <input id="email" placeholder="Email adresiniz..." name="email" maxlength="70" type="text" tabindex="2" autocomplete="off" class="input"/></p>

                <p><label for="message" class="label">Mesajınız:</label>
                <textarea id="message" placeholder="Mesajınız..." cols="60" rows="10" name="message" maxlength="1000" type="text" tabindex="2" autocomplete="off" class="input"/></p>

                <p>
                    <input type="submit" value="Contact Me">
                </p>
            </div>
    </form>
</div>

Answer 2

解决方案是：

$(document).delegate("#doContact", "click", function(){

Answer 3

Try to use:

$("#doContact").live("click",function(e) {

instead of

$("#doContact").click(function(e) {

This should work for the ajax loaded form