单击div元素后jquery用ajax提交表单答案

【问题标题】：jquery submit form with ajax after click div element单击div元素后jquery用ajax提交表单
【发布时间】：2014-12-20 11:53:26
【问题描述】：

我在编写这个脚本时遇到了麻烦。我想在单击 div 元素后通过触发提交将表单作为 ajax 发送。

这是表单代码：

<div title="add to Favorits" id="social1549" class="favtrigger nobtn transition">
    <form name="favoritform" id="formsocial1549" action="/dienstleister/fotografen/1549/verlobungsfotos-im-studio-hochzeitsfotografie" method="post" accept-charset="utf-8">
        <input type="hidden" name="favorit" value="1549">
        <div id="submitsocial1549" class="layout">
            <div class="favicon_off"></div>
            <p>as Favorit</p>
        </div>    
    </form>
</div>

这是 jquery 代码。

<script>
    $(document).ready(function() {
        $('.favtrigger').click(function() {
            var favid = $(this).attr('id');
            var form = $(this).find('#form' + favid);
            alert ('until here it works'); // this works
            form.submit(function(event) {
                alert ('this doesn't work'); // here nothing happens
                event.preventDefault();
                var action = form.attr('action'),
                    method = form.attr('method'),
                    data = form.serialize();
                $.ajax({
                    url: action,
                    type: method,
                    data: data,
                    success: function(data) {
                        var data = $('#' + favid + ' .layout', data);
                        $('#' + favid + ' .layout').replaceWith(data);
                    }
                });
            });
        });
    });
</script>

我做错了什么？

【问题讨论】：

也尝试触发提交 - 只设置一个“.on('submit'..”不会调用它。在它之后添加一个 submit()
试过了，现在可以提交，但没有ajax。
并在设置 .on('submit'.. ? 后调用了提交
我试过这个系列：on.('click), submit(), on.submit(func.. 否则在 on.submit 之后使用 submit()，什么都没有发生..

标签： jquery ajax forms click submit

【解决方案1】：

如果您仅使用它来检索操作链接，我认为不需要提交表单。我会完全取消表单提交。

$(document).ready(function() {
    $(document).on('click', '.favtrigger', function() {
        var favid = $(this).attr('id');
        var form = $(this).find('#form' + favid);
        var action = form.attr('action'),
            method = form.attr('method'),
            data = form.serialize();

        $.ajax({
            url: action,
            type: method,
            data: data,
            success: function(data) {
                var data = $('#' + favid + ' .layout', data);
                $('#' + favid + ' .layout').replaceWith(data);
            }
        });

    });
});

【讨论】：