Question

我的屏幕上有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个小部件，其中包含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>" );

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

为什么会这样？

无论屏幕上有多少widget_1，它都应该只显示点击widget_1中的1个加载图片。

Answer 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) );
});

jQuery最近找到混乱

1 个答案: