獲取JQuery作用於由GWT動態添加的類名稱

我試圖讓jquery在使用GWT時對我造成一些影響。我有添加到頁面的通知，點擊時應該消失。由於可能有多個相同類型的通知（警告，錯誤等），我試圖動態添加一個樣式名稱，只有當它們通過GWT單擊時，然後讓jquery按照該特定類名稱操作。獲取JQuery作用於由GWT動態添加的類名稱

問題是，jquery函數在可以添加樣式名稱之前觸發，因此用戶必須單擊通知兩次才能關閉它。

任何想法？

public abstract class AbstractNotificationWidget extends Composite implements ClickHandler, HasClickHandlers { 

    protected abstract String getUniqueId(); 

    @Override 
    public HandlerRegistration addClickHandler(ClickHandler handler) { 
    return addDomHandler(handler, ClickEvent.getType()); 
    } 

    @Override 
    public void onClick(ClickEvent event) { 
    doClick(getUniqueId()); 
    } 

    protected static native void doClick(String name) /*-{ 
    $wnd.$("#" + name).click(function() { 
     $wnd.$(this).slideUp("slow"); 
     $wnd.$("div", this).fadeOut("slow"); 
     }); 
    }-*/; 

}

我那麼具有延伸上面的類

public class ErrorNotificationWidget extends AbstractNotificationWidget { 

    private final String uniqueId; 

    public ErrorNotificationWidget (String title, String message) { 
    uniqueId = DOM.createUniqueId(); 

    initWidget(uiBinder.createAndBindUi(this)); 

    this.getElement().setId(uniqueId); 

    this.addClickHandler(this); 
    } 
    @Override 
    protected String getUniqueId() { 
    return this.uniqueId; 
    }

這些子類使用UiBinder的確定應該如何繪製的子類。然後將這些小部件添加到要顯示的面板中。

來源

2010-02-17 Josh

您能否提供更多的源代碼 - 您發佈的部分不完全足以查看發生了什麼問題。你也許想把'styleName.equals'改成'styleName.contains';）另外，使用'FocusPanel'作爲你的'mainWidget'可能比自己處理'ClickHandler'註冊要容易一些:)而且你可能想要切換到DOM.createUniqueId（）的命名通知小部件（我認爲其中有一些） - 你不會一次隱藏所有的小部件;） – 2010-02-17 23:55:34

感謝您的評論。這絕不是最終的代碼，所以肯定有一些清理，但包含的想法是一個很好的。 DOM.createUniqueId（）方法也可能是一個好主意，但是如果小部件在第一次點擊時關閉，那麼這並不重要。我不知道我可以發佈更多的代碼。我有擴展這一個的子類，並添加他們自己的樣式，使它們看起來像一個錯誤或警告。雖然我會用最新版本的代碼來編輯我的帖子。 – Josh 2010-02-18 00:39:36

我添加了更多代碼。創建通知實例時，我開始添加唯一標識，但仍需要2次點擊。我必須失去一些明顯的東西。 – Josh 2010-02-18 14:10:10

你到底想要達到什麼目的？基於它應用的樣式或它的ID隱藏小部件？（在當前版本中，您似乎正在混合使用）

如果ClickEvent正在快速燒製（可以通過在其之前添加超時進行測試），則可以嘗試將其封裝在DeferredCommand中。

另一種可能性是jQuery正在加緊;）在jQuery/Mootools中使用回調函數時，我遇到了一些奇怪的問題 - 原因是這些框架擴展/更改function()（除其他外） - 但是，JSNI的東西被執行從一個「乾淨的」iframe，沒有任何jQuery所做的更改（這就是爲什麼你必須通過$wnd參考主窗口）。您可以測試，如果是這樣的問題，在這裏通過定義，例如，在你的HTML網頁測試功能，然後把它當作回調函數在void doClick(String name)方法：

protected static native void doClick(String name) /*-{ 
    $wnd.$("." + name).click($wnd.jqueryTest); // BTW, why '"." + '? 
}-*/;

，就連最初的建議仍然有效 - 使用FocusPanel作爲你的主要部件 - 試圖正確實施HasClickHandlers（和類似的接口）是從我的經驗PITA，可以導致怪異的錯誤和/或內存泄漏。

來源

2010-02-18 17:05:08

我想創建很多通知，並能夠單獨關閉它們。如果我給他們所有相同的DOM類名稱，jquery將關閉所有這些。當你在gwt中調用addStyleName（name）時，它將該名稱添加到該元素的DOM類中。「。」 + name是這樣的jquery拉名稱（.gwt-12-whatever）而不是「.name」。我很欣賞使用FocusPanel的建議，但我無法做到這一點。我需要它是一個綜合。此外，我不相信這是任何東西的速度，因爲即使當我在初始化時創建名稱，在它被點擊之前，我仍然需要點擊兩次。 – Josh 2010-02-18 21:21:36

你誤會了我關於'FocusPanel'的問題 - 我想讓你在UiBinder模板（綁定到特定的通知窗口小部件）中將它用作你的根/主面板。然後你可以簡單地調用'focusPanel.addClickHandler（不管）「（而不是自己實現'HasClickHandlers'等）。關於樣式名稱 - 不是通過樣式名稱搜索元素，而是通過id來更快速地（並且不容易出錯） - 因爲在DOM中不應該有兩次具有相同ID的元素（即爲什麼我建議使用'DOM.createUniqueId'）。 – 2010-02-18 22:33:59

如何通過gwt添加一個id？我只知道添加到DOM類的函數addStyleName（）。 – Josh 2010-02-19 00:01:27

也許你應該嘗試GWTQuery http://code.google.com/p/gwtquery/，而不是嘗試本地集成它。

來源

2010-02-17 22:57:35 malte

類添加到您想要關閉上單擊該元素，即

<div class="close-on-click">Content</div>

你的JavaScript可以自動綁定功能選擇匹配任何現有的或動態創建的元素：

$('.close-on-click').live('click', function() { 
    $(this).remove(); 
});

來源

2010-02-18 08:47:49 aceofspades

這實際上是我想要做的，除非我不能在ui.xml中硬編碼「close-on-click」，因爲那個小部件的每個實例都會得到相同的類名，並且會在任何一個他們被點擊。感謝您的迴應。 – Josh 2010-02-18 14:00:33

如果鏈接位於要關閉的元素中，請嘗試以下操作： $（'a.close'）。live（'click'，function（）{ $（this）.parents（'。class-to -close：first'）。remove（）; }）; – aceofspades 2010-02-19 16:30:18

您的代碼需要兩次點擊，因爲您在第一次點擊（通過onclick方法）上安裝了Jquery點擊綁定事件，因此最後一次點擊會產生反應。更改你的代碼類似的東西：

protected static native void doClick(String name) /*-{  
     var $_this = $("#" + name); 
     $_this.slideUp("slow");  
     $wnd.$("div", $_this).fadeOut("slow");  
}-*/;

僅供參考，您可以使用GwtQuery（jQuery的的GWT克隆）和代碼應該看起來像：

import static com.google.gwt.query.client.GQuery.$; 

public abstract class AbstractNotificationWidget extends Composite implements ClickHandler, HasClickHandlers {  

@Override 
public HandlerRegistration addClickHandler(ClickHandler handler) {  
    return addDomHandler(handler, ClickEvent.getType()); 
}  

@Override 

public void onClick(ClickEvent event) {  
    $(this).slideUp(Speed.SLOW); 
    $("div", getElement()).fadeOut(Speed.SLOW); 
}  

}

無需使用UNIQUEID

來源

2011-03-10 14:10:48 jdramaix

獲取JQuery作用於由GWT動態添加的類名稱

回答

相關問題