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"更改为提交按钮：<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的表单

jQuery不响应我的点击事件

3 个答案: