Ajax 调试错误答案

【问题标题】：Ajax debug ErrorAjax 调试错误
【发布时间】：2018-03-12 01:45:10
【问题描述】：

我有问题，当我通过将标签属性“for”添加到标签并将标签属性“id”添加到复选框来绑定两个组件（复选框和标签）时，它会引发 ajax 调试错误：“无法为事件绑定侦听器”点击元素“variantBox4”，因为该元素不在 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);
       }


       }

感谢您的帮助。

【问题讨论】：

标签： javascript jquery ajax checkbox wicket

【解决方案1】：

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

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

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

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

这告诉 Wicket 哪个标签和表单组件属于一起，因此它可以自行生成正确的属性和值，而无需在 Java 类中添加任何额外代码。

【讨论】：