javascript - 图像 slider 中的 Ajax 形式

Question

我正在使用以下来自superluminary对此问题的回答的代码jQuery AJAX submit form ajaxify 我网站上的所有表单。

(function($) {
    $.fn.autosubmit = function() {
        this.submit(function(event) {
            event.preventDefault();
            var form = $(this);
            $.ajax({
                type: form.attr('method'),
                url: form.attr('action'),
                data: form.serialize()
                }).done(function(response) {
                    $(form).parent('.like-this').html("works");
                    $(form).parent('.dislike-this').html("works");
                }).fail(function(response) {
                    console.log('Ajax form submit does not work!');
                });
            });
            return this;
        }
    })(jQuery)

 $(function() {
     $('form[data-autosubmit]').autosubmit();
 });

然后我添加data-autosubmit到我的表单标签，表单使用 ajax 提交。

例如。 <form action="like/post" method="post" data-autosubmit>

---

问题
在我的图像 slider 中，它基于 this image slider ，我有一个表单，它充当类似按钮。

表单工作正常，但页面会重新加载，并且模式窗口会在表单提交时关闭。它不使用ajax，尽管我输入了data-autosubmit到表单标签中。

完全相同的表单在我项目的其他地方工作得很好(使用ajax)。

---

slider (相关部分)

/*
* jQuery Slider Plugin
* Version : Am2_SimpleSlider.js
* author  :amit & amar
*/

(function ($) {

    jQuery.fn.Am2_SimpleSlider = function () {
        //popup div
        $div = $('<div class="product-gallery-popup"><div class="popup-overlay"></div><div class="product-popup-content"><div class="product-image"><img id="gallery-img" src="" alt="" /><div class="gallery-nav-btns"><a id="nav-btn-next" class="nav-btn next"></a><a id="nav-btn-prev" class="nav-btn prev"></a></div></div><div class="product-information"><p class="product-desc"></p><div class="clear"></div><hr><br><br><div class="like-image"><form action="" method="post" class="like-form" data-autosubmit></form><div class="liked"></div></div><a href="" class="cross">X</a></div></div>').appendTo("body");

        //on image click   
        $(this).click(function () {
            $('.product-gallery-popup').fadeIn(500);
            $('body').css({ 'overflow': 'hidden' });
            $('.product-popup-content .product-image img').attr('src', $(this).find('img').attr('src'));
            $('.product-popup-content .product-information p').html($(this).find('.image-description').html());

            // In the like-image div is the form
            $('.product-popup-content .product-information .like-image').html($(this).find('.like-image').html());

            $Current = $(this);
            $PreviousElm = $(this).prev();
            $nextElm = $(this).next();
            if ($PreviousElm.length === 0) { $('.nav-btn.prev').css({ 'display': 'none' }); }
            else { $('.nav-btn.prev').css({ 'display': 'block' }); }
            if ($nextElm.length === 0) { $('.nav-btn.next').css({ 'display': 'none' }); }
            else { $('.nav-btn.next').css({ 'display': 'block' }); }
        });

---

表格

<!-- the image like button -->
<div class="like-image">
    <?php if ($this->likedImages[$postImage->image_id]) { ?>

        <!-- like the image -->
        <div class="like-this"> 
            <form action="<?= Config::get('URL');?>like/like_image" method="post" class="like-form" data-autosubmit>
                <input type="hidden" name="image_id" value="<?= $postImage->image_id; ?>" />
                <button type="submit" class="button like-button">Like</button>
            </form>
        </div><!-- /.like-this -->

    <?php } else { ?>

        <!-- dislike the image -->
        <div class="dislike-this">
            <form action="<?= Config::get('URL');?>like/unlike_image" method="post" class="like-form" data-autosubmit>
                    <input type="hidden" name="image_id" value="<?= $postImage->image_id; ?>" />
                    <button type="submit" class="button like-button">Dislike</button>
            </form>
        </div><!-- /.dislike-this-post -->
    <?php } ?>

    <div class="liked"></div>
</div><!-- /.like-image -->

---

如果您需要查看更多代码，请告诉我。

我将非常感谢任何形式的帮助!!

Answer 1

据我了解您的代码，您需要添加 ajaxForm init。

更改此行:

// In the like-image div is the form
$('.product-popup-content .product-information .like-image').html($(this).find('.like-image').html());

对此:

// In the like-image div is the form
var contentContainer = $('.product-popup-content .product-information .like-image');
contentContainer.html($(this).find('.like-image').html());
contentContainer.find('form').autosubmit();

<小时/>

一些解释: 当您调用此代码时

$(function() {
     $('form[data-autosubmit]').autosubmit();
});

选择器'form[data-autosubmit]'无法解析您的表单，因为它未出现在文档中(表单存储在变量中)。当您通过将 html 内容设置为 .like-image 元素将表单附加到文档时，必须调用 autosubmit 在新创建的表单上初始化 jQuery 插件。