Ajax调试错误

Question

我有问题，当我通过将标签属性 "for" 添加到标签并将标签属性 "id" 添加到复选框来绑定两个组件（复选框和标签）时，它会抛出 ajax 调试错误：“无法为元素 "variantBox4" 上的事件 "click" 绑定侦听器，因为该元素不在 DOM 中”。

这是复选框代码：

      AjaxCheckBox checkBox = new AjaxCheckBox("variantBox", variantModel) {

                    @Override
                    protected void onUpdate(AjaxRequestTarget target) {
                        if (variantModel.getObject()) {
                            target.appendJavaScript(";utils_showElement(" + item.getModelObject().getId() + ");");
                        } else {
                            target.appendJavaScript(";utils_hideElement(" + item.getModelObject().getId() + ");");
                        }
                    }



                };

我在此代码中将属性修饰符添加到复选框：

checkBox.add(new VariantElementAttributeModifier("id",Model.of("checkbox_"+Long.toString(item.getModelObject().getId()))));

这里我对标签做同样的操作：

      Label headerLabel = new Label("content", Model.of(item.getModelObject().getContent()));

      headerLabel.add(new VariantElementAttributeModifier("for",Model.of("checkbox_"+Long.toString(item.getModelObject().getId()))));

这里是html:

    <!DOCTYPE html>
     <html lang="en" xmlns:wicket="http://maven.apache.org/FML/1.0.1">
      <head>
      <meta charset="UTF-8">
       <title>Title</title>
      </head>
      <body>

      <wicket:panel>




      <section class="column column_form">
        <div class="column__title">Опросный лист</div>
        <div wicket:id="container" class="column__content" style="height: 
       475px;">
            <div wicket:id="list" class="form">
                <div wicket:id="contentArea"></div>
                <div wicket:id="helpLabel"></div>

                <wicket:fragment wicket:id="variantFragment" 
         class="form__item checkbox">
                    <div class="checkbox__label" wicket:id="content">
        </div>
                    <input class="checkbox__input"   type="checkbox" 
        wicket:id="variantBox" />

                    <!--<input class="checkbox__input" type="checkbox" 
           name="input-name" id="checkbox_1"/>-->
                    <!--<label class="checkbox__label" for="checkbox_1"><b>текст</b><span>текст текст</span><span>текст текст</span></label>-->
                </wicket:fragment>
                <wicket:fragment wicket:id="Textfragment" 
        class="form__item form__textfield">
                    <label wicket:id="textlabel">лейбл</label>
                    <input type="text" wicket:id="textfield" />
                </wicket:fragment>
            </div>
        </div>
    </section>


</wicket:panel>
</body>
</html>

这里是属性修饰符代码：

      package ru.simplexsoftware.constructorOfDocuments.Utils;
      import org.apache.wicket.AttributeModifier;
      import org.apache.wicket.model.IModel;


       public class VariantElementAttributeModifier extends AttributeModifier {
       public VariantElementAttributeModifier(String attribute, IModel<?> replaceModel) {

        super(attribute, replaceModel);
       }


       }

感谢您的帮助。

Answer 1

如果要手动更改元素的 ID，则必须使用 Component#setMarkupId(String)。

使用 AttributeModifier 基本上只是将您想要的任何属性和值添加到生成的 HTML。虽然它不会告诉 Wicket 您想要使用的新 ID，因此 Wicket 在内部仍然使用它自己的 ID 来为 AjaxCheckBox 生成 JavaScript。

顺便说一句：如果你有一个 HTML label 标记和相应的 HTML 表单组件，你也可以使用 wicket:for 属性，如本例所示：

<label wicket:for="nameInput">Name</label>
<input wicket:id="nameInput">

这会告诉 Wicket 哪个标签和表单组件属于一起，因此它可以自行生成正确的属性和值，而无需您编写任何额外代码 Java class.

Ajax调试错误

Ajax debug Error

javascript

ajax

checkbox

jquery

wicket