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

Subscribing multiple handlers to DOM Events with jQuery

本文关键字：处理 程序 jQuery DOM Events 使用      更新时间：2023-09-26

我正在尝试通过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>

这段代码可以正常工作，通过警告'refreshing'

  <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>

我做错了什么，我如何使两个处理程序着火?

这对我来说很好。

在显示第二个警报框之前，你必须关闭第一个警报框。

您的代码在http://jsfiddle.net/gaby/W3zC4/

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

$(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;
     });
});

这对我来说也很好。我认为你也应该考虑jquery表单插件在这里ajax提交和改变输入类型从提交到按钮

相关文章：