jQuery不响应我的点击事件

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>

问题很简单。

jQuery当前可用于其他加载页面加载的div。 （例如，导航栏右上方的黄色登录区域）

但是，此表单是通过AJAX调用加载的，因此我相信我需要使用诸如delegate或live类的函数。 我不知道是不是这样。

你可以看看吗？

Answer 1

更改此行：

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

对此：

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

<button id="doContact"按钮： <button id="doContact"更改为提交按钮： <input type="submit">

编辑：我不确定您如何尝试完成此，但是这我将如何做-这工作：

<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>

您的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

尝试使用：

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

代替

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

这应该适用于ajax加载的表单