javascript - 如何捕获 wicket jquery ui spinner 的 onclick

Question

如何从 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))));

为了让自己变得更加困难，这个微调器包含在 ListView 中，因为预算项目的数量是可变的。我让剩余预算标签反射(reflect)在文本字段中所做的更改，但不反射(reflect)使用微调器按钮所做的更改!

我已经开始探索用以下几行注入(inject)我自己的 JavaScript:

        // behavior to capture changes made using spinner buttons (doesn't work!!!)
        add(new Behavior() {
            @Override
            public void renderHead(Component component, IHeaderResponse response) {
                super.renderHead(component, response);
                response.render(OnDomReadyHeaderItem.forScript("$('.ui-spinner-button ui-spinner-up ui-corner-tr ui-button ui-widget ui-state-default ui-button-text-only').click(function() {$(this).siblings('input').change();})"));
            }
        });

以下是声明的 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 注入(inject)是否有希望工作(我只是用 javascript 弄湿了我的脚)或者有没有办法在 Wicket 中更正确地做到这一点？ 2 - 如果javascript是唯一的方法，当我无法控制生成的jquery的id属性时，如何正确找到元素(或者我可以以某种方式控制它？)？

我正在使用 wicket-jquery-ui 6.2.1 库和 wicket 6.6.0。谢谢。

编辑

我之前发布的生成的 html(现已删除)是通过右键单击并选择 viewSource 生成的，但不显示从 jquery 实际生成的 html。请参阅下面 IE9 中 F12 开发人员工具的屏幕截图，其中显示了为微调器生成的 html，其中包括原始 <input>加两个生成<a>微调器按钮的标签。

Answer 1

我刚刚看到这篇文章...

只是说您还有另外 2 个选择:

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 项目还是通过 google 小组:
https://github.com/sebfz1/wicket-jquery-ui/
http://groups.google.com/group/wicket-jquery-ui/

最诚挚的问候， 塞巴斯蒂安。