单击ajax按钮时Jquery不起作用

如何解决单击ajax按钮时Jquery不起作用

我使用 jquery datepicker，但单击 ajax 按钮后不显示。
单击后有没有办法再次显示日期选择器？我使用检票口 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中的所有脚本都不起作用
请帮帮我。

解决方法

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

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

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

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

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

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

单击ajax按钮时Jquery不起作用

如何解决单击ajax按钮时Jquery不起作用

解决方法

相关推荐