1

我的屏幕上有 3 个相同的小部件，这些小部件与 3 个 div 标签中的小部件具有用户选择在他/她的屏幕上拥有的内容，她/他可以在屏幕上移动和排列。有点像 iGoogle 所做的。所以基本上，他们可以在屏幕上拥有 0 个或多个相同的小部件。

我通过在 html 中使用类而不是 id 来实现这一点。

<div class="widget_1">
    <div class="widget_header_1"></div>
    <div class="widget_sub_header_1"></div>
    <div class="widget_content_1"></div>
    <div class="widget_footer_1"></div>
<div>

因此，如果我有 2 个这些小部件，则用户屏幕将有 2 个带有 class 的小部件widget_1，即上面的 html 将在 html 源代码中出现两次。

无论如何，我在小部件的 sub_header 中有一个按钮，它将数据添加到小部件的content部分，即

$('.my_button').live('click',function() {
    get_data( $(this) );
});

这很好，例如，如果我点击第一个按钮widget_1，只有它的内容会改变，如果我点击第二个按钮widget_1，只有它的内容会改变，它不会影响其他widget_1的。

为此，我正在使用：

$(this).closest('.widget_1').find('.widget_content_1').empty().append( some_data_here );

我的问题是，我想在小部件中单击按钮时将加载图像添加到内容中sub_header，所以我尝试了：

$(this).closest('.widget_1').find('.widget_content_1').prepend( "<img class='imgLoading' src='/img/loading_white_32.gif'></img>" );

这是因为它只在单击按钮的小部件中显示加载图像，但如果我在屏幕上widget_1有 2 个，它会在单击时显示 2 个图像，如果我有，它将在单击时显示 5 个图像5在屏幕上。 widget_1widget_1widget_1

为什么会这样？

无论屏幕上有widget_1多少个，它都应该在单击时仅显示 1 个加载图像。widget_1

4

1 回答 1

1

它看起来像代码：

$('.my_button').live('click',function() {
    get_data( $(this) );
});

为您创建的每个小部件运行一次。这是不必要的，实际上会适得其反，因为一次调用live()安装了一个委托处理程序，该处理程序将“看到”click从所有匹配的元素冒泡的事件.my_button，无论它们驻留在哪个小部件中。

您必须找到一种方法让该代码只运行一次（如果有的话，可能在您的小部件的通用初始化例程中）。

顺便提一下，从 jQuery 1.7 开始，不推荐使用live()来支持on() 。上面的代码将变为：

$(document).on("click", ".my_button", function() {
    get_data( $(this) );
});
于 2012-11-05T12:18:47.790 回答