Question

我创建了一个使用jquery.tools.min.js库的简单javascript。

我的javascript看起来像这样：

function testFunction() {
    $("img").click(function() {
        alert("Handler for .click() called.");
    });

    console.log("what's up?");
}

$(testFunction);

因此，当我在一个简单的HTML页面上尝试时，当我点击一张图片时，我会收到警告信息。

我在GWT应用程序中添加了完全相同的javascript。

当应用程序加载时，我会看到console.log消息，但是当我点击应用程序上的任何图像时，什么也没发生。

为什么会这样？是因为testFunction()不适用于动态创建的图像吗？或者是因为事件被GWT覆盖了？

谢谢。

修改

我在创建内容后尝试回忆我的功能：

public native final void recallFunction() /*-{
    $wnd.console.log('again1');
    $wnd.testFunction();
    $wnd.console.log('again2');
}-*/;

我可以看到我的日志消息，但没有触发任何点击事件。

编辑2：

当我跑步时：

$("img").click(function() { 
    alert("Handler for .click()."); 
});

或

testFunction();

直接在 Firebug的控制台中，该事件已正确附加到我的图片!!

我还尝试在窗口的onload事件中调用testFunction()但没有更好的运气。

Answer 1

我假设您自己包含jQuery库，它是1.7或更高版本。

如果在定义testFunction时您的图像不存在于DOM中，请使用“on（）”。

function testFunction() {
$("img").on('click',function() {
    alert("Handler for .click() called.");
});

console.log("what's up?");
}

Answer 2

而不是通过Jquery编写JSNI，您可以轻松地使用gwtquery http://code.google.com/p/gwtquery/

开始

您将从Jquery方法和GWT性能优化中获益。

GwtQuery优于Jquery -

http://manolocarrasco.blogspot.in/2011/01/gwtquery-css-selectors-performance.html jQuery vs GQuery Benchmark

此外，如果它只是很好的滚动，你试图实现你可以看看 - GWT CustomScrollPanel example 和 Custom Scrollbar in GWT

Answer 3

在JSNI代码中使用jQuery时，必须使用$ wnd.jQuery或$ wnd。$而不是$。另请参阅Google网上论坛上的this question。

Answer 4

您是否正在向相关图片添加任何其他事件监听器（以gwt为单位）？

只能有一个点击处理程序，如果你在两个enviros中设置它们，你将会受到伤害。

另一条评论中提到的Gwt-Query非常友好，可以委托回gwt内部事件（因为它知道事件处理程序的语法）。

您可能想在图像上使用萤火虫对象检查试试console.log（$（“img”）），看看你得到了什么。

在图片上查找__listener变量;这是gwt听众。查看DOMImplStandard~220，了解在gwt中汇总事件时会发生什么。

我不确定jquery如何附加事件，但我确实在mozilla规范中看到了这一点： “如果在具有相同参数的同一EventTarget上注册了多个相同的EventListener，则会丢弃重复的实例。它们不会导致EventListener被调用两次，”

https://developer.mozilla.org/en/docs/DOM/element.addEventListener

GWT和JQuery之间的兼容性

4 个答案: