当通过ajax动态添加标记时，Wicket-IE8-Javascript事件侦听器不会执行

Wicket - IE8 - Javascript event listeners arent executed, when tags are dynamically added over ajax

本文关键字：事件 Wicket-IE8-Javascript 侦听器 执行 ajax 动态 加标记 添加      更新时间：2023-09-26

我花了几个小时，也许几天的时间处理一个非常奇怪的问题：（

我正在创建一个基于Wicket解决方案的应用程序。它在IE9、IE10、Chrome和FF中都能完美工作。奇怪的是，我也在IE8中测试过它，它在99%的情况下都能工作（不同计算机上的IE实例+完全相同的IE8版本）。但现在问题来了。

问题：我正在通过AjaxLink按钮创建动态内容。单击按钮后，WebMarkupContainer模型将发生更改，WebMarkupContainer将刷新（基于Ajax，因此页面不会完全重新加载，但只有容器会重新加载）。

容器中的每个项都添加了AjaxFormComponentUpdatingBehavior。在onComponentTag方法中，我添加了tag.put（"onchange"，"some jsFunctionCalling…."）；。问题是，单击项目后，不会调用任何事件。我已经尝试在.add（new AttributeModifier…..）上添加onchange侦听器，但结果仍然相同。正如我所说，我在另一台电脑上的同一版本的IE中尝试了相同的代码，它运行得很好有趣的是，在重新构建页面后，一切都很完美，直到WebMarkupContainer中添加了新项目。在此之后，在页面再次刷新之前，任何项目侦听器都不会工作

我得到的最新想法之一是，这个问题不在代码中，而是在IE的设置中（可能是安全性）。有人知道吗？什么设置可能不同并导致这些问题？Wicket网站上有什么设置可以解决这个问题吗？如果这些侦听器是通过ajax动态添加的，是否有一些设置可以阻止它们注册到DOM？

我没有尝试过，但IMHO有三个选项可以尝试：

  1. 与其自己添加"onchange"，不如添加OnChangeAjaxBehavior，让所有工作都在wicket中进行。不利的一面是每个事件的服务器往返
  2. 添加数据属性（AttributeModifier.append("data-param1", "foobar")）将参数推送到html中，并在AjaxLink上的点击事件后调用ajaxRequestTarget.appendJavaScript("attachOnChangeHandler()"); 。attachOnChangeHandler()应该是你的js函数，为每个需要它的项添加onchange处理程序。通过数据属性，你可以访问你的参数
  3. 由于Wicket6：为了避免与Wicket混合使用太多js，您可以订阅一个全局AJAX事件。在您的情况下，解决方案几乎与2中的相同。只需在js中为"/ajax/call/success"添加一个监听器（通过检查id来查看调用是否与您的组件相关），并在那里添加onchange处理程序。这是IMHO在不将自定义js与Wicket混合的情况下的最佳解决方案

@peterchon提供的解决方案（在DOM中附加比将被wicket替换的元素更高的事件处理程序）在其他任何情况下都可以工作，但您有"onchange"，它只适用于input、textarea和select元素。

顺便说一句，刷新后页面"正常工作"，因为整个页面都已呈现，浏览器可以正确地附加处理程序。

您可以尝试以下方法：

/* this will catpure the target that triggered the event */
function getEventTarget( e ) {
  e = e || window.event;
  return e.target || e.srcElement;
}
function doSomething( e ) {
  var that = getEventTarget( e );
  if( that.tagName.toLowerCase() === 'a' ) { // specify the target, in this cas <a>
    // Do something
  }
}
parentElement.onclick = doSomething;

这个脚本基本上会捕获任何事件，然后将target的变量传递给将执行某些操作的函数。

希望这对你有用。

您尝试使用非wicket JavaScript/Ajax方式来实现某些功能。这很好，但也让它变得很乱。

请查看这篇关于将参数从JavaScript传递到wicket，反之亦然的文章。我认为它会适合你的需要。

http://wickedsource.org/2013/01/07/rolling-your-own-ajax-behavior-with-wicket/

相关文章：