在事件处理上将javascript转换为jquery

Question

我有以下代码：

    input.setOnkeypress("if (event.keyCode == 13) 
                {
                document.getElementById('search_report_form:search_button').onclick(); 
                return true;
                }");

这就是功能：

final class GroupsSelector extends BaseRenderablePanel<GroupsSelector> {
        private GroupsSelector group(LabourInputReportCriteria.Level level) {
            HtmlSelectBooleanCheckbox box = new HtmlSelectBooleanCheckbox();
            boolean isSelected = selections.isGroupSelected(level);
            box.setSelected(isSelected);
            // box.setDisabled(isDaySelectedOnFirst(level));
            box.setId("groupBy" + level.getClass().getSimpleName());
            box.setOnclick("submit()");
            box.addValueChangeListener(u.addExpressionValueChangeListener("#{reportSearchCriteriaModel.groupBy}"));
            HtmlOutputText labelComponent = new HtmlOutputText();
            labelComponent.setValue(getGroupSelectionValue(level));
            tr().td();
            html(box);
            html("&nbsp;");
            html(labelComponent);
            endTd().endTr();
            return this;
        }

Answer 1

首先，如果jQuery有效，您不需要将其更改为jQuery。在页面中添加jQuery并不意味着DOM停止工作。如果不工作，将DOM代码更改为等效的jQuery代码将不会使开始工作。

但jQuery相当于

document.getElementById('search_report_form:search_button').onclick();

是

$('#search_report_form\3a search_button').click();

或者更可读；

$('[id="search_report_form:search_button"]').click();

这里的棘手之处在于，在id中有一个冒号（:），所以我们不能只使用#search_report_form:search_button来查找它，因为这个冒号看起来像是一个伪类的开始。所以我们必须对它进行转义。在CSS选择器中，你可以用一个反斜杠和它的十六进制等价符来替换它。十六进制中:的字符代码是3A，因此3a。要在字符串文字中写入反斜杠，必须写入其中的两个（第一个转义第二个）。您需要它后面的空间来终止它，因此'#search_report_form\3a search_button'。

第二种形式使用属性选择器，因为我们可以将ID放在引号中，而不必担心冒号。

Answer 2

如果您想将前几行转换为JQuery，请尝试此

$('input').on('keypress', function(event){
    if (event.keyCode == 13) {
       $('[id="search_report_form:search_button"]').click(); //.submit();
       return true;
    }
});