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

我花了几个小时，也许几天时间研究了一个非常奇怪的问题：(

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

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

容器中的每个项都添加了AjaxFormComponentUpdateingBehavior。在onComponentTag方法中，我添加了tag.put（“onchange”，“some jsFunctionCalling…”）。问题是，单击该项后，不会调用任何事件。我已尝试通过添加onchange listener.add（新的AttributeModifier…），但结果仍然是一样的。正如我所说，我在另一台电脑上的同一版本IE中尝试了相同的代码，它工作得非常完美。有趣的是，在重新编辑页面后，所有内容都工作得非常好，直到向WebMarkupContainer添加了新项目。之后，在页面再次刷新之前，项目侦听器都不会工作。

---

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

您可以尝试此方法：

/* 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;

/*这将触发事件的目标*/
函数getEventTarget（e）{
e=e | | window.event；
返回e.target | | e.src元素；
}
功能剂量测定法（e）{
var=getEventTarget（e）；
如果（该.tagName.toLowerCase（）==='a'）{//在此cas中指定目标
//做点什么
}
}
parentElement.onclick=doSomething；

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

---

希望这对您有用。

您可以尝试以下方法：

/* 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;

/*这将触发事件的目标*/
函数getEventTarget（e）{
e=e | | window.event；
返回e.target | | e.src元素；
}
功能剂量测定法（e）{
var=getEventTarget（e）；
如果（该.tagName.toLowerCase（）==='a'）{//在此cas中指定目标
//做点什么
}
}
parentElement.onclick=doSomething；

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

---

希望这对你有用。

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

不要自己添加“onchange”，而是添加

OnChangeAjaxBehavior

，并在wicket中完成所有工作。缺点是每次事件都会发生服务器往返

添加数据属性（

AttributeModifier.append（“data-param1”，“foobar”）

）将参数推入html，并在AjaxLink上的单击事件后调用

ajaxRequestTarget.appendJavaScript（“attachOnChangeHandler（）”）；

。

attachOnChangeHandler（）

应该是您的js函数，可以将onchange处理程序添加到每个需要它的项目中。通过数据属性，您可以访问您的参数

：为了避免与Wicket混合使用大量js，您可以订阅一个全局AJAX事件。 您案例中的解决方案几乎与第2部分相同。只需在js中为“/ajax/call/success”添加一个侦听器 （通过检查id查看调用是否与组件相关）并在那里添加onchange处理程序。 这是最好的解决方案，没有混合自定义js与Wicket

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

---

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

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

不要自己添加“onchange”，而是添加

OnChangeAjaxBehavior

，并在wicket中完成所有工作。缺点是每次事件都会发生服务器往返

添加数据属性（

AttributeModifier.append（“data-param1”，“foobar”）

）将参数推入html，并在AjaxLink上的单击事件后调用

ajaxRequestTarget.appendJavaScript（“attachOnChangeHandler（）”）；

。

attachOnChangeHandler（）

应该是您的js函数，可以将onchange处理程序添加到每个需要它的项目中。通过数据属性，您可以访问您的参数

：为了避免与Wicket混合使用大量js，您可以订阅一个全局AJAX事件。 您案例中的解决方案几乎与第2部分相同。只需在js中为“/ajax/call/success”添加一个侦听器 （通过检查id查看调用是否与组件相关）并在那里添加onchange处理程序。 这是最好的解决方案，没有混合自定义js与Wicket

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

---

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

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

请检查这篇关于传递参数的文章