Jquery 单击 ajax 按钮时不起作用

Question

我使用 jquery 日期选择器，点击 ajax 按钮后它不显示。
点击后有没有办法再次显示日期选择器？我用 wicket 8.
BasePage.java

public class BasePage extends WebPage {
    ...
}

BasePage.html

<body>
    ...
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jqueryui.min.js"></script>
    <script src="/js/main.js"></script>
</body>

HomePage.java

public class HomePage extends BasePage {
    public HomePage() {
        SearchForm searchForm = new SearchForm();
        Form<SearchForm> form = new Form<>(new CompoundPropertyModel<SearchForm>(searchForm))

        AjaxButton btn = new AjaxButton() {
            protected void onSubmit(AjaxRequest target) {
                // Handle search data
                ...
                target.add(form);
            }
        };

        TextField<String> date = new TextField<>("searchDate");
        form.add(date);
        form.add(btn);
    }
}

HomePage.html

<wicket:extend>
    <form wicket:id="form">
        <input wicket:id="searchDate" class="datepicker" />
        <button wicket:id="btn">Search</button>
    </form>
</wicket:extend>

main.js

$(function() {
    $(".datepicker").datepicker();
    ...
});

单击 ajax 按钮后，文件 main.js 中的所有脚本均无效
请帮助我。

Answer 1

当您通过 AJAX 更新表单时，您会替换其中的每个元素，其中包括您在日期选择器中使用的输入字段。但是这样做会在首次加载页面时丢失 main.js 所做的 javascript 设置。您可以通过两种方式解决此问题。首先，你可以只更新那些需要刷新的元素，例如你用来显示搜索结果的组件（我想你的代码中一定有这样的元素）。

第二个解决方案，更繁重和复杂，是制作一个自定义 TextField 组件，每次呈现时执行日期选择器 javascript 代码。可以在用户指南中找到此类解决方案的示例：https://wicket-guide.herokuapp.com/wicket/bookmarkable/org.wicketTutorial.ajaxdatepicker.HomePage

我建议采用第一种解决方案，因为它更自然、更简单并且需要的代码更少。

更新：如果要刷新文本字段，另一个简单的解决方案是使用 target.appendJavaScript 重新应用日期选择器插件：

target.add("$('#" + date.getMarkupId() + "').datepicker();");

这应该将日期选择器添加到全新的字段中。

Jquery 单击 ajax 按钮时不起作用

Jquery not working when click ajax button

wicket