Javascript 如何为wicket jquery ui微调器捕获onclick

如何从JQuery中捕获微调器组件上的向上和向下按钮的onclick事件

我可以使用以下代码捕获关联文本字段的onchange，但“向上”和“向下”微调器按钮不会触发事件：

                Spinner<Integer> psbBudget = new Spinner<>("psbBudget", new PropertyModel(psb,"psbBudget"), Integer.class);
                psbBudget.add(new AjaxFormComponentUpdatingBehavior("onchange") {
                    @Override
                    protected void onUpdate(AjaxRequestTarget art) {
                        Integer inputS = (Integer) getFormComponent().getConvertedInput();
                        BigDecimal spinnerTime = BigDecimal.valueOf(inputS);
                        unallocatedTimeMap.put(psb, unallocatedTimeMap.get(psb).subtract(spinnerTime));
                        art.add(budgetListViewContainer);
                    }
                });
                listItem.add(psbBudget);

                li.add(new Label("remainingBudgetLabel", new Model(unallocatedTimeMap.get(psb))));

以下是声明的html的相关部分：

                                <table>
                                    <tr>
                                        <td/>
                                        <th>Budget</th>
                                        <th>Remaining</th>
                                    </tr>
                                    <tr wicket:id="budgetListView">
                                        <th wicket:id="budgetLabel">Budget
                                        </th><td><input wicket:id="psbBudget" type="text" style="width:3em" maxLength="2"/>
                                        </td><td wicket:id="remainingBudgetLabel"/>
                                    </tr>
                                </table>

预算
剩下的
预算

所以我想这是一个由两部分组成的问题： 1-这种javascript注入是否有任何希望（我刚刚被javascript打湿了脚），或者有没有一种方法可以在Wicket中更正确地实现这一点？ 2-如果javascript是唯一的方法，那么当我无法控制生成的jquery的id属性（或者我可以控制它）时，我如何才能正确地找到元素

我将wicket jquery ui 6.2.1库与wicket 6.6.0一起使用。多谢各位

编辑

我之前发布的生成的html（现在已删除）是通过右键单击并选择viewSource生成的，但没有显示从jquery生成的实际html。请参见以下IE9中F12开发者工具的屏幕截图，其中显示了为微调器生成的html，包括原始的

以及为微调器按钮生成的两个

标记

---

尽管我很不愿意回答自己的问题，但这里是：

我能够用以下代码捕获事件。当有人在字段中手动输入数字时，“onchange”捕捉事件，“onspinstop”通过单击向上/向下箭头在组件更新后捕捉事件：

Spinner<Integer> psbBudget = new Spinner<>("psbBudget", new Model(allocatedTimeMap.get(psb)), Integer.class);
psbBudget.add(new AjaxFormComponentUpdatingBehavior("onchange") {
    @Override
    protected void onUpdate(AjaxRequestTarget art) {
        Integer input = (Integer) getFormComponent().getConvertedInput();
        // Do whatever with updated input //
        art.add(remainingBudgetLabel,remainingBudgetLabel.getMarkupId());
    }
}
psbBudget.add(new AjaxFormComponentUpdatingBehavior("onspinstop") {
    @Override
    protected void onUpdate(AjaxRequestTarget art) {
        Integer input = (Integer) getFormComponent().getConvertedInput();
        // Do whatever with updated input //
        art.add(remainingBudgetLabel,remainingBudgetLabel.getMarkupId());
    }
}

Spinner psbBudget=new微调器（“psbBudget”，新模型（allocatedTimeMap.get（psb）），Integer.class）；
添加（新的AjaxFormComponentUpdateBehavior（“onchange”）{
@凌驾
受保护的void onUpdate（AjaxRequestTarget艺术）{
整数输入=（整数）getFormComponent（）.getConvertedInput（）；
//对更新的输入执行任何操作//
艺术添加（remainingBudgetLabel，remainingBudgetLabel.getMarkupId（））；
}
}
添加（新的AjaxFormComponentUpdateBehavior（“onspinstop”）{
@凌驾
受保护的void onUpdate（AjaxRequestTarget艺术）{
整数输入=（整数）getFormComponent（）.getConvertedInput（）；
//对更新的输入执行任何操作//
艺术添加（remainingBudgetLabel，remainingBudgetLabel.getMarkupId（））；
}
}

在查看了事件名称之后，我找到了这一点，然后尝试了事件字符串的所有可能组合。要正确执行此操作，必须将字符串全部用小写字母表示，并在事件名称的开头添加“on”字符串

---

在这个练习中我学到的另一件事是，我可以通过调用

art.add（component，component.getMarkupId（））；

来更新（我想我实际上是在替换它们？）listview中的各个组件。这比我以前使用

listview.setList（updatedList）所做的要好得多

和

艺术添加（listViewContainer）；

我刚刚看到这篇文章

我只想说你还有两个选择：

1/您拥有自己的扩展微调器，具有：

@Override
protected void onConfigure(JQueryBehavior behavior)
{
    super.onConfigure(behavior);

    behavior.setOption("onspinstop", this.onStopBehavior.getCallbackFunction());
    //onStopBehavior is an JQueryAjaxPostBehavior, see how AjaxDatePicker works for instance
}

第二个选择是请求一个

AjaxSpinner

，因为它通过github项目或谷歌集团是有意义的：

致以最良好的祝愿，

---

Sebastien。

如果您通过选项为“旋转”或“更改”（微调器事件）分配自定义js，该怎么办？还没有尝试过，但我看不出它为什么不起作用。这样，您可以确保它在微调器初始化后运行（我想这就是它不起作用的原因）。要设置标记id，请使用setMarkupId（字符串）在组件上。如果您想在java代码中访问它，还有getMarkupId。@buritos-感谢您的建议，我对Options对象很感兴趣，并将研究该解决方案。“setMarkupId（）”只设置“”组件的id，不更改生成的jquery（我现在意识到这不会出现在生成的html中，因此我将在编辑中包括一个屏幕截图）@buritos-您的建议让我找到了一个对我有效的解决方案。我引用了jquery微调器的javadocs，并且有一个

stop（）

事件。我不确定它是如何工作的，但通过将AjaxFormComponentUpdateingBehavior事件的

放在顶部，我能够捕获事件并在文本字段中获得调整后的值。如果你想用这些内容来回答我的问题，我会接受它作为答案…我只是讨厌回答我自己的问题。我不想回答你的问题e在没有给出明确答案的情况下获得好评。我很高兴我的评论确实起到了作用，因此请继续回答，并给出您的解决方案，我将投票表决：-）感谢sebfz1，我不熟悉JQueryAjaxPostBehavior类，因此需要查看文档。这听起来很有趣，可能有助于解决我遇到的其他Wicket JQueryUI问题。关于通过github或googlegroup请求组件，我想我只是想如果它是有用的东西，它已经包含在内了，否则，如果它是我需要的东西，我应该自己构建它。谢谢你的优点。您好，如果您需要扩展某些组件（或编写自己的组件），特别是使用ajax，我建议您看看JQueryAjaxPostBehavior&JQueryAjaxBehavior。在最新版本中，组件实现的理念发生了一些变化（6.7.0，今晚发布）所以在我重写之前，文档可能在几天/几周内都不准确

@Override
protected void onConfigure(JQueryBehavior behavior)
{
    super.onConfigure(behavior);

    behavior.setOption("onspinstop", this.onStopBehavior.getCallbackFunction());
    //onStopBehavior is an JQueryAjaxPostBehavior, see how AjaxDatePicker works for instance
}