JQuery 和事件冒泡...再次

发布于 2024-09-12 13:13:46 字数 1656 浏览 6 评论 0原文

我大致正在处理以下内容:

var i;
var k = 5;
$('document').ready(function () {
    $('#someElement').click(function (e) {
        e.stopImmediatePropagation();
        i++;
        if (i >= k) {
            my_function();
        });
    }
});
my_function() {
    alert(i);
    $('#myDisplay').text("You have clicked on '#someElement' " + i + "times");
}

当我单击“#someElement”时,如预期的那样,“my_function()”会触发,但警报框会弹出 5 次!

一个快速而明显的解决方案是将 my_function() 的内容放入“#someElement”附加的 if 控制语句中,但我非常热衷于保留我概述的结构,并且确信有一个简单的方法这样做的方法。

有什么想法吗?

更新

我最初认为问题出在我的“点击”事件中的函数调用。事实并非如此,我认为问题可能与嵌套的“ajaxComplete”调用有关:

var i = 0;

$('document').ready(function () {

    $('<div id="someElement">Click me</div>').appendTo('body');
    $('<div id="myDisplay"></div>').appendTo('body');
    $('#someElement').click(function (e) {
        i++;
        $.get("test.html", function(html)
        {       
            $(html).ajaxComplete(function()
            {
                my_function(i);
            });
        });

    });

});

function my_function(n)
{

    switch (n)
    {

    case 1:
        alert(n);
        $('#myDisplay').text("this is case " + n);
        break
    case 2:
        alert(n);
        $('#myDisplay').text("this is case " + n);
        break
    case 3:
        alert(n);
        $('#myDisplay').text("this is case " + n);
        break

    default:
        alert('A great detective always breaks the case. :)');
        break

    }

}

我省略了常量“k”,因为 case 语句使上一个示例中的“if”语句无用。上面的代码更好地说明了我遇到的问题。

任何帮助将不胜感激。 :)

I am roughly working with the following:

var i;
var k = 5;
$('document').ready(function () {
    $('#someElement').click(function (e) {
        e.stopImmediatePropagation();
        i++;
        if (i >= k) {
            my_function();
        });
    }
});
my_function() {
    alert(i);
    $('#myDisplay').text("You have clicked on '#someElement' " + i + "times");
}

'my_function()' fires when I click on '#someElement', as expected, but the alertbox pops up 5 TIMES!!!.

A quick and obvious solution would be to place the contents of my_function() and place them into the if control statement attached to '#someElement', but I am very keen to keep the structure I've outlined, and am sure there's a simple way to do so.

Any ideas?

UPDATE

I originally assumed that the problem was with the function call from within my 'click' event. It wasn't, I think the problem may have something to do with the nested 'ajaxComplete' call:

var i = 0;

$('document').ready(function () {

    $('<div id="someElement">Click me</div>').appendTo('body');
    $('<div id="myDisplay"></div>').appendTo('body');
    $('#someElement').click(function (e) {
        i++;
        $.get("test.html", function(html)
        {       
            $(html).ajaxComplete(function()
            {
                my_function(i);
            });
        });

    });

});

function my_function(n)
{

    switch (n)
    {

    case 1:
        alert(n);
        $('#myDisplay').text("this is case " + n);
        break
    case 2:
        alert(n);
        $('#myDisplay').text("this is case " + n);
        break
    case 3:
        alert(n);
        $('#myDisplay').text("this is case " + n);
        break

    default:
        alert('A great detective always breaks the case. :)');
        break

    }

}

I've omitted the constant 'k', as the case statements render the 'if' statement from the previous example useless. The code above provides a better illustration of the problem I've encountered.

Any help will be much appreciated. :)

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

无所的.畏惧 2024-09-19 13:13:46

根据更新的问题进行编辑

问题是您在回调中调用 $.ajaxComplete() 。你应该摆脱它。匿名回调函数就是您所需要的。

$.ajaxComplete() 的目的是设置一个默认函数,在任何 ajax 请求完成时运行。如果这是您想要的,您应该将其从当前回调中取出,并将其放在 .ready() 调用中,以便它只运行一次。

按照您现在的方式,对于每次点击(以及成功的响应),您都会添加另一个相同的处理程序。因此,单击 5 次后,它现在有 5 个相同的单击处理程序。

来自文档: http://api.jquery.com/ajaxComplete/

每当 Ajax 请求完成时,jQuery 就会触发 ajaxComplete 事件。此时将执行已使用 .ajaxComplete() 方法注册的所有处理程序。


原始答案

这一定不是您的实际代码,因为它根本不会按照您的方式运行。

您的函数没有 function 声明。您需要使用 0 之类的值初始化 i,并且 click 处理程序的右括号放错了位置。

也就是说,您的代码在更正后对我来说工作得很好。

尝试一下: http://jsfiddle.net/sGWjL/1/

如果警报弹出 5 次,则您需要粘贴更多(或实际)正在使用的代码。

var i = 0;
var k = 5;

$('document').ready(function () {
    $('#someElement').click(function (e) {
        e.stopImmediatePropagation();
        i++;
        if (i >= k) {
            my_function();
        }
    });
});

function my_function() {
    alert(i);
    $('#myDisplay').text("You have clicked on '#someElement' " + i + "times");
}​

Edit based on updated question:

The issue is that you're calling $.ajaxComplete() in your callback. You should get rid of that. The anonymous callback function is all you need.

The purpose of $.ajaxComplete() is to setup a default function to run when any ajax request completes. If this is what you want, you should take it out of the current callback, and just place it in the .ready() call so that it only runs once.

The way you're doing it right now, for each click (and successful response) you're adding another identical handler. So after you click 5 times, it now has 5 of the same click handler.

From the docs: http://api.jquery.com/ajaxComplete/

Whenever an Ajax request completes, jQuery triggers the ajaxComplete event. Any and all handlers that have been registered with the .ajaxComplete() method are executed at this time.


Original answer

This must not be your actual code, because it won't run at all the way you have it.

You don't have a function declaration for your function. You need to initialize i with a value like 0, and your closing parenthesis for the click handler is misplaced.

That said, your code works fine for me when corrected.

Try it out: http://jsfiddle.net/sGWjL/1/

If the alert pops up 5 times for you, then you need to paste more (or actual) code being used.

var i = 0;
var k = 5;

$('document').ready(function () {
    $('#someElement').click(function (e) {
        e.stopImmediatePropagation();
        i++;
        if (i >= k) {
            my_function();
        }
    });
});

function my_function() {
    alert(i);
    $('#myDisplay').text("You have clicked on '#someElement' " + i + "times");
}​
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文