Question

我正在尝试重构旧的 JavaScript + jQuery 代码。所以我将它们分成小块以便于维护。

在我的旧“程序”代码中，(document).on()方法适用于每个元素。但现在它只适用于第一个元素。

Dnianas.Post = {



    init: function() {
        this.cache();
        this.bindEvents();
    },

    cache: function() {
        this.postForm = $('#postForm');
        this.likeButton = $('#likePost');
    },

    bindEvents: function() {
        $(document).on('submit', this.postForm, this.createPost);
    },

    createPost: function(event) {
        var request = $.ajax(
        {
            url: '/posts/create',
            data: $(this).serialize(),
            beforeSend: function() {
                $loading.show();
            },
            complete: function() {
                $loading.hide();
            }
        });

        request.done(function(data) {
            self.renderCreatedPost(data);
        });

        event.preventDefault();
    },

这是我将文本发布到数据库的代码。当我发送请求时，没有数据将传递给服务器。什么都没有。

这是我的旧代码，这很有用。

$body.on('submit', '#postForm', function (event) {
    $.ajax({
        url: '/posts/create',
        type: 'POST',
        dataType: 'JSON',
        data: $(this).serialize(),
        beforeSend: function() {
            $loading.show();
        },
        complete: function() {
            $loading.hide();
        }
    })
    .done(function (data) {
        if (data.success == 'false') {
            // Render some error
        } else {
            // Post it
            }
        });

    event.preventDefault();
});

我不知道为什么，有人可以解释一下吗？

就像我在旧代码中说的那样，它完美无缺！

Answer 1

我认为没有一个版本的jQuery支持你在新代码中所做的事情。

您的代码正在调用cache，然后调用bindEvents。你在cache：

中有这个

this.postForm = $('#postForm');

，这在bindEvents：

中

$(document).on('submit', this.postForm, this.createPost);

这意味着您正在调用on并向其传递事件名称，jQuery对象和函数。

查看the documentation，没有on的签名允许将jQuery对象作为第二个参数。

我看到你现在已经发布了你的旧代码，它在那里使用了一个选择器字符串，它确实可以通过事件委托来实现：

$(document).on('submit', '#postForm', this.createPost);

如果你想在不使用委托的情况下处理元素本身的提交，那么它当然是：

this.postForm.on('submit', this.createPost);

$（文件）.on不起作用

1 个答案: