使用jQuery为DOM事件订阅多个处理程序

nr7wwzry  于 2022-12-12  发布在  jQuery
关注(0)|答案(3)|浏览(112)

我尝试通过CSS类订阅事件。我有两个处理程序,定义如下:

$(document).ready(function() {
    $('.refresh-cart').click(
        function(e) {
            alert('refreshing');
        });
    
    $('form.ajax').submit(
        function(e) {
            e.preventDefault();
            $.post(
                this.action,
                $(this).serialize(),
                function(data, textStatus, jqXHR) { alert('post'); },
                'text');
        }
    );
});

当这些处理程序重叠时,我没有获得预期的功能。
这段代码可以正常工作,通过警告“post”并提交 AJAX 请求。

<form action="page.html" method="post" class="ajax">
     <input type="text" name="Sample" value="SampleValue" />
     <input type="submit" />
 </form>

此代码通过发出警报'刷新'正常工作

<div class="refresh-cart">Refresh Widget</div>

但是,当这些订阅者重叠时(例如在以下示例中),只有“refresh-cart”订阅者触发。

<form action="page.html" method="post" class="ajax">
     <input type="text" name="Sample" value="SampleValue" />
     <input type="submit" class="refresh-cart" />
 </form>

我做错了什么?我怎么才能让两个处理程序都被解雇?

11dmarpk

11dmarpk1#

对我来说很好。
不过,在显示第二个警告框之前,您必须关闭第一个警告框。
您代码位于http://jsfiddle.net/gaby/W3zC4/

qnakjoqk

qnakjoqk2#

您是否尝试过从单击处理程序提交表单?

$(document).ready(function() {
    $('form.ajax').submit(
        function(e) {
            e.preventDefault();
            $.post(
                this.action,
                $(this).serialize(),
                function(data, textStatus, jqXHR) { alert('post'); },
                'text'
            );
    });

    $('.refresh-cart').click(
        function(e) {
            alert('refreshing');
            $('form.ajax').submit();
            return false;
     });
});
qyuhtwio

qyuhtwio3#

我觉得你也应该考虑一下jquery表单插件here的 AJAX 提交,把输入类型从提交改为按钮

相关问题