jquery.form.js 的问题并阻止事件传播答案

【问题标题】：problem with jquery.form.js and preventing event propagationjquery.form.js 的问题并阻止事件传播
【发布时间】：2011-07-26 06:23:05
【问题描述】：

我正在开发一个带有滑动内容的单页网站。

我正在使用 jquery.form.js 并在头部使用以下内容来初始化联系表单/脚本：

<script type="text/javascript">
$(document).ready(function() { 

    $('#closeit').click(function(){
    $('.message').hide('slow');
    return false;
    });

    var options = { 
    target:        '#alert',
    }; 

    $('#contactForm').bind('submit', function() {
        $(this).ajaxSubmit(options);
        e.stopPropagation();
        return false;
    });


    $.fn.clearForm = function() {
      return this.each(function() {
        var type = this.type, tag = this.tagName.toLowerCase();
        if (tag == 'form')
          return $(':input',this).clearForm();
        if (type == 'text' || type == 'password' || tag == 'textarea')
          this.value = '';
        else if (type == 'checkbox' || type == 'radio')
          this.checked = false;
        else if (tag == 'select')
          this.selectedIndex = -1;
      });
    };  
</script>

当用户单击表单中的任何位置时，我还使用以下方法来防止事件传播：

$(function() {
    $('#email-form').click(fillForm);
});
function fillForm(e){
        e.stopPropagation();
        return false;
}

但是当我点击“提交”按钮时，表单没有提交。我想不出如何解决这个问题，以便在没有事件冒泡的情况下提交表单。

任何指导/帮助将不胜感激。

MTIA。

（这是我的记录表格：）

<form action="sendmemail.php" method="post" id="contactForm">
<ul>
    <li>
        <div class="field-row">
            <div class="field-name"><p>name:<span class="abbrev">*</span></div>
            <div class="field-box"><input type="text" class="allfields" name="name" id="name"/></div>
        </div>
    </li>
    <li>
        <div class="field-row">
            <div class="field-name"><p>email:<span class="abbrev">*</span></div>
            <div class="field-box"><input type="text" class="allfields" name="email" id="email"/></div>
        </div>
    </li>
    <li>
        <div class="field-row">
            <div class="field-name"><p>phone:<span class="abbrev">*</span></div>
            <div class="field-box"><input type="text" class="allfields" name="tele" id="tele"/></div>
        </div>
    </li>
    <li>
        <div class="field-row message-field">
            <div class="field-name"><p>message:<span class="abbrev">*</span></div>
            <div class="field-box">
                <textarea class="allfields messagetext" name="message" id="message"></textarea>
            </div>
        </div>
    </li>
    <li class="submitbutton">
        <input type="submit" name="submitbutton" id="submitbutton" value=" SUBMIT" />
    </li>
</ul>

【问题讨论】：

不确定这是否只是一个错字，或者它是否在您的实际代码中 - 但您缺少提交处理程序的 arg 定义（例如e）。您还想专门停止传播还是只想阻止事件的默认处理？
嗯，这是个好问题。我对 jquery 很陌生，在这种情况下，我不确定默认的事件处理是什么。该表单位于#content div 中。如果用户点击#content，网站就会滑动。那么处理站点滑动的默认事件，还是表单提交呢？无论如何，我想停止网站滑动并提交表单。

标签： jquery events stoppropagation

【解决方案1】：

如果你甚至禁止他点击使用你的用户将如何提交表单

$(function() {
    $('#email-form').click(fillForm);
});
function fillForm(e){
        e.stopPropagation();
        return false;
}

【讨论】：

是的，删除了return false，它现在似乎可以工作了。谢谢！

【解决方案2】：

你看jquery.form.js主页上ajaxSubmit的例子了吗？ http://jquery.malsup.com/form/#ajaxSubmit

$('#contactForm').submit(function() { 
    // inside event callbacks 'this' is the DOM element so we first 
    // wrap it in a jQuery object and then invoke ajaxSubmit 
    $(this).ajaxSubmit(options); 

    // !!! Important !!! 
    // always return false to prevent standard browser submit and page navigation 
    return false; 
});

我不知道您在表单中单击时期望什么事件，但是您停止在表单中传播事件这一事实也可能导致停止对按钮的单击。

【讨论】：