jQuery最接近的發現混淆

我的屏幕上有3個相同的小部件，小部件與3個div標籤相同，用戶選擇在他/她的屏幕上顯示哪些內容，哪些他/她可以在屏幕上移動和排列。有點像iGoogle做的。所以基本上，他們可以在屏幕上有0個或更多相同的小部件。jQuery最接近的發現混淆

我通過在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>");

這工作，因爲它僅顯示在該被點擊的按鈕的微件的加載圖像，但它顯示在點擊的widget_1 2幅圖像，如果我有在屏幕上2 widget_1的，它將顯示5點擊0中的圖像如果我有5 widget_1的在屏幕上。

這是爲什麼發生？

無論屏幕上有多少個widget_1，它都應該在點擊的widget_1中顯示1個加載圖像。

來源

2012-11-05 oshirowanen

我很茫然解釋這一點。您的代碼應該按預期工作。你可以在一個簡單的[小提琴]（http://jsfiddle.net/）中重現這個問題嗎？ –

我已經創建了一個小提琴，但它的工作方式如同... http：// jsfiddle。net/rSN5w/2/ – oshirowanen

這可能是因爲你爲每個小部件綁定了'click'處理程序，這是不必要的，因爲'live（）'安裝了一個委託處理程序，它將接收來自所有小部件的'click'事件。換句話說，你必須確保你的'$（'。my_button'）。live（..）'行只運行一次。 –

它看起來像代碼：每進行一次

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

奔跑小部件創建。這是不必要的，其實適得其反，因爲live()單個呼叫安裝委派處理程序，它會「看到」 click事件從符合.my_button無論哪插件他們居住中的所有元素，鼓泡。

你必須找到一種方法讓代碼只運行一次（如果它有一個，可能在你的小部件的通用初始化例程中）。

順帶一提，請注意live()已棄用，因爲自jQuery 1.7以來支持on()。上面的代碼將變成：

$(document).on("click", ".my_button", function() { 
    get_data($(this)); 
});

來源

2012-11-05 12:18:47

jQuery最接近的發現混淆

回答

相關問題