单击ajax按钮时Jquery不起作用答案

【问题标题】：Jquery not working when click ajax button单击ajax按钮时Jquery不起作用
【发布时间】：2021-01-21 11:12:45
【问题描述】：

我使用 jquery datepicker，点击 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 文件中的所有脚本都不起作用
请帮帮我。

【问题讨论】：

提供的信息不足以帮助您。在浏览器 DevTools 控制台中检查 JavaScript 错误。
当您通过 AJAX 刷新文本字段时，您可能会丢失日期选择器。请显示更多 Java 和 HTML 代码，以了解如何将日期选择器应用于您的字段。
我已经更新了源代码，运行控制台时没有错误

标签： wicket

【解决方案1】：

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

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

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

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

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

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

【讨论】：

谢谢，但我想更新我的 TextField，有没有办法做到这一点
嗨，我刚刚用一个适合你的新解决方案更新了答案。
想。最后的解决方案是好的