Question

我的网站上有一个链接，用于打开登录表单的模式对话框。我使用AJAX将登录数据发送到服务器，但不知何故，.click（）事件不起作用。我猜它是因为我用.html（）加载html。

以下是代码：

$('#loginLink').click(function(e) {
            e.preventDefault();
            $('<div id="loginContainer" title="Login"></div>')
            .html('<?php echo str_replace(array("\r\n", "\r", "\n"), "", $this->element("ajax/login")); ?>')
            .dialog({
                modal: true,
                resizable: false,
                position: 'top'
            });
        });
        $('#UserLoginForm input[type=submit]').click(function() {
            e.preventDefault();

            var form = $('#UserLoginForm').serialize();

            $.ajax({
                type: 'POST',
                url: '/login',
                dataType: 'json',
                data: form,
                beforeSend: function(XMLHttpRequest) {
                    $("#loginContainer .ajaxloader").show();
                },
                success: function(data) {
                    var message = $("#loginContainer > .flashMessage");

                    if(data.status == 'success') {
                        location.href = '/account';
                    } else {
                        message.text(data.msg);
                        message.show();
                    }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    $('#loginContainer .ajaxloader').hide();
                    $('#loginContainer > .flashMessage').text('There was an error.').show();
                },
                complete: function(XMLHttpRequest) {
                    $("#loginContainer .ajaxloader").hide();
                }
            });
            return false;
        });

此部分加载文件中的内容：

<?php echo str_replace(array("\r\n", "\r", "\n"), "", $this->element("ajax/login")); ?>

输出：

<div class="flashMessage fail"></div><form action="/login" controller="users" id="UserLoginForm" method="post" accept-charset="utf-8"><div style="display:none;"><input type="hidden" name="_method" value="POST"/></div><div class="input text required"><label for="UserEmail">E-Mail</label><input name="data[User][email]" style="width: 267px;" maxlength="64" type="text" id="UserEmail"/></div><div class="input password required"><label for="UserPassword">Password</label><input name="data[User][password]" style="width: 267px;" type="password" id="UserPassword"/></div><div class="submit"><input type="submit" value="Login"/></div></form><div class="ajaxloader"><img src="/img/icons/ajax-loader.gif" alt="" /></div><div class="clear" style="line-height: 8px;">&nbsp;</div>

一切正常，除了.click（）部分发送AJAX请求：/我在Javascript中不是很好，所以我不知道错误到底是什么。

Answer 1

您忘记了function()中的“e”。

Answer 2

插入dom的任何动态内容都应使用.on（jQuery v1.7）或.live/.delegate（在jQuery 1.7之前）。
您在属性选择器中缺少引号..
与其他帖子一样，您错过了传递'e'（事件）参数。

建议使用.on或.delegate而不是.live。

使用.on [推荐]

      $('#loginContainer').on('click',  '#UserLoginForm input[type="submit"]', function (e) {

使用.live，

      $('#UserLoginForm input[type="submit"]').live('click', function(e) {

使用.delegate [推荐]

      $('#loginContainer').delegate('#UserLoginForm input[type="submit"]', 'click', function (e) {

Answer 3

您是否通过.click()绑定了点按操作？如果您这样做，请将其更改为.on("click",function(){});

只是因为元素在完全加载后插入到DOM中。所以你的.click没有生效，因为此时元素不可用！

编辑：你没有通过e参加活动！

Answer 4

您可以尝试使用委托方法来连接您的活动。

$(document).ready(function() {
    $('body').delegate('#yourbuttonid', 'click', yourbutton_onclick_function);
});

委托方法会将您的点击事件连接到您的按钮，无论它何时被添加到页面。

所以替换这个...

$('#loginLink').click(function(e) {
    e.preventDefault();
    $('<div id="loginContainer" title="Login"></div>')
        .html('<?php echo str_replace(array("\r\n", "\r", "\n"), "", $this->element("ajax/login")); ?>')
        .dialog({
            modal: true,
            resizable: false,
            position: 'top'
        });
    });

与

$(document).ready(function() {
    $('body').delegate('#loginLink', 'click', function(e) {
        e.preventDefault();
        $('<div id="loginContainer" title="Login"></div>')
            .html('<?php echo str_replace(array("\r\n", "\r", "\n"), "", $this->element("ajax/login")); ?>')
            .dialog({
                modal: true,
                resizable: false,
                position: 'top'
            });
        });
    });
});

.click（）事件不会被执行

4 个答案: