Fatal编程技术网

Javascript Ajax调试错误

javascript jquery ajax checkbox wicket

Javascript Ajax调试错误,javascript,jquery,ajax,checkbox,wicket,Javascript,Jquery,Ajax,Checkbox,Wicket,我有一个问题，当我通过向标签添加标记属性“for”和向复选框添加标记属性“id”来绑定两个组件（复选框和标签）时，它抛出ajax调试错误：“无法为事件绑定侦听器”单击元素“variantBox4”，因为该元素不在DOM中” 以下是复选框代码： AjaxCheckBox checkBox = new AjaxCheckBox("variantBox", variantModel) { @Override

我有一个问题，当我通过向标签添加标记属性“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);
       }


       }

包ru.simplexsoftware.constructorOfDocuments.Utils；
导入org.apache.wicket.AttributeModifier；
导入org.apache.wicket.model.IModel；
公共类VariantElementAttributeModifier扩展了AttributeModifier{
公共变量TelementAttribute修改器（字符串属性，IModel replaceModel）{
超级（属性，替换模型）；
}
}
谢谢您的帮助。

如果您想手动更改元素的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类中的任何额外代码