Liferay 6.1迁移至6.2后Portlet中单选按钮无法点击问题排查

问题背景 #

Liferay开发新手，正在进行从6.1到6.2的Portlet迁移工作。某Portlet包含3个标签页，对应3个单选按钮，点击单选按钮应切换显示对应标签页，但目前单选按钮点击无响应。已尝试使用jQuery事件绑定及原生JavaScript事件绑定，均未解决问题。

原始HTML代码 #

<table cellspacing="0" cellpadding="0" align="center">                  
<tr>                                    
<td><input type="radio" name="select" id="<portlet:namespace/>inRadio" checked="true"  tabindex="1"/></td>
<th>&nbsp; <%= resourceBundle.getString("In_Documents") %> </th>
<td>&nbsp;&nbsp;&nbsp; <input type="radio" name="select" id="<portlet:namespace/>busRadio"  checked="false" tabindex="2"/></td>
<th>&nbsp; <%= resourceBundle.getString("Bus_Documents") %>  </th>
<td>&nbsp;&nbsp;&nbsp; <input type="radio" name="select" id="<portlet:namespace/>outRadio"  checked="false" tabindex="3"/></td>                                         
<th>&nbsp; <%= resourceBundle.getString("Out_Documents") %> </th>                   
        </tr>
</table>

原始jQuery代码 #

$(document).on("click","#<portlet:namespace/>outRadio,#<portlet:namespace/>busRadio,#<portlet:namespace/>inRadio",function(e){  
        
        $("#<portlet:namespace/>intabID").hide();
        $("#<portlet:namespace/>bustabID").hide();
        $("#<portlet:namespace/>outtabID").hide();  
        var eventTargetId = $(this).attr("id");
        if(eventTargetId=="<portlet:namespace/>outRadio"){
            $("#<portlet:namespace/>outtabID").show();
        }else if(eventTargetId=="<portlet:namespace/>busRadio"){
            $("#<portlet:namespace/>bustabID").show();
        }else{ // <portlet:namespace/>inRadio
            $("#<portlet:namespace/>intabID").show();
        }
    });

问题原因分析 #

• 命名空间解析异常：<portlet:namespace/>标签未被Portlet容器正确渲染，导致JS选择器与实际DOM元素ID不匹配。
• jQuery版本冲突：Liferay 6.2内置了jQuery，若自定义引入其他版本jQuery，会引发事件绑定失效。
• 事件类型选择不当：使用click事件绑定单选按钮，适配性不如change事件（点击单选按钮的文字标签无法触发切换）。
• DOM加载时机问题：若JS代码在DOM元素渲染前执行，即使使用事件委托，也可能因选择器无法匹配元素导致绑定失效。

Liferay 6.2优化处理方案 #

1. 验证命名空间正确性 #

查看页面渲染后的HTML源码，确认radio按钮的ID（例如_myPortlet_WAR_myPortlet_inRadio）与JS代码中的选择器完全一致。确保JS代码写在JSP文件中，<portlet:namespace/>能被容器正确解析，不要将JS放在独立的.js文件中（除非通过Liferay资源加载机制传递命名空间参数）。

2. 使用Liferay官方推荐的AUI实现 #

Liferay 6.2内置AUI框架，可避免jQuery冲突，代码示例：

AUI().use('node', function(A) {
    // 绑定change事件适配单选按钮切换场景
    var radioButtons = A.all('#<portlet:namespace/>inRadio, #<portlet:namespace/>busRadio, #<portlet:namespace/>outRadio');
    radioButtons.on('change', function(e) {
        var targetId = this.get('id');
        // 批量隐藏所有标签页
        A.all('#<portlet:namespace/>intabID, #<portlet:namespace/>bustabID, #<portlet:namespace/>outtabID').hide();
        // 显示对应标签页
        switch(targetId) {
            case '<portlet:namespace/>outRadio':
                A.one('#<portlet:namespace/>outtabID').show();
                break;
            case '<portlet:namespace/>busRadio':
                A.one('#<portlet:namespace/>bustabID').show();
                break;
            default:
                A.one('#<portlet:namespace/>intabID').show();
        }
    });
});

3. 修复jQuery冲突问题 #

若坚持使用jQuery，需使用Liferay内置的jQuery并处理冲突，代码示例：

// 避免与其他库冲突
jQuery.noConflict();
// 使用change事件替代click
jQuery(document).on("change", "#<portlet:namespace/>outRadio,#<portlet:namespace/>busRadio,#<portlet:namespace/>inRadio", function(e){  
    // 批量隐藏标签页简化代码
    jQuery("#<portlet:namespace/>intabID, #<portlet:namespace/>bustabID, #<portlet:namespace/>outtabID").hide();  
    var eventTargetId = jQuery(this).attr("id");
    if(eventTargetId === "<portlet:namespace/>outRadio"){
        jQuery("#<portlet:namespace/>outtabID").show();
    }else if(eventTargetId === "<portlet:namespace/>busRadio"){
        jQuery("#<portlet:namespace/>bustabID").show();
    }else{
        jQuery("#<portlet:namespace/>intabID").show();
    }
});

4. 排查控制台报错与事件阻止 #

打开浏览器开发者工具控制台，检查是否有JS语法错误或未捕获异常。同时确认没有其他JS代码调用e.preventDefault()或e.stopPropagation()阻止了单选按钮的事件冒泡。

内容的提问来源于stack exchange，提问作者KKKs