如何让jQuery函数在页面初始化与点击事件时均正常触发？

我在处理浏览器事件触发函数时遇到问题，函数名为initRanker。当前使用的HTML代码如下：

<row label="r1"><span class="blueRow">Blue</span></row>
<row label="r2"><span class="redRow">Red</span></row>
<row label="r3"><span class="GreenRow">Green</span></row>
<col label="c5" open="1" openSize="25" randomize="0"><span class="blueCol">Blue OTHER</span></col>
<col label="c6" open="1" openSize="25" randomize="0"><span class="redCol">Red OTHER</span></col>
<col label="c7" open="1" openSize="25" randomize="0"><span class="greenCol">Green OTHER</span></col>

之前尝试的代码存在以下问题：

• 仅页面加载时生效，后续操作失效：

$(window).load(function() {
  jQuery.onCreate("*",initRanker);           
});   

• 仅捕获点击事件时生效，初始状态无响应：

$(window).click(function() {
  jQuery.onCreate("*",initRanker);           
});  

我需要修改代码，让initRanker函数在页面初始化和点击事件时都能正常工作。附当前的initRanker函数及尝试代码：

function initRanker() {
   if ($(".blueRow").parent().is(":visible")) {
    console.log("Blue i am visible");
    $(".blueCol").parent().show();
    $(".redCol").parent().hide();
    $(".greenCol").parent().hide();
    $(".sq-cardsort-bucket-c6").hide();
    $(".sq-cardsort-bucket-c7").hide();    
  }
  else if ($(".redRow").parent().is(":visible")){
    console.log("Red i am visible");
    $(".redCol").parent().show();
    $(".blueCol").parent().hide();
    $(".greenCol").parent().hide();
    $(".sq-cardsort-bucket-c5").hide();
    $(".sq-cardsort-bucket-c7").hide();    
  }
  else if ($(".GreenRow").parent().is(":visible")){
    console.log("Green i am visible");
    $(".greenCol").parent().show();
    $(".blueCol").parent().hide();
    $(".redCol").parent().hide();
    $(".sq-cardsort-bucket-c5").hide();
    $(".sq-cardsort-bucket-c6").hide();    
  } 
}
     
$(window).load(function() {
   jQuery.onCreate("*",initRanker);           
});   
     
$(window).click(function() {
   jQuery.onCreate(".blueRow",initRanker);           
});  
 
$(window).click(function() {
   jQuery.onCreate(".redRow",initRanker);           
});  

$(window).click(function() {
   jQuery.onCreate(".GreenRow",initRanker);           
});   

核心问题是重复绑定jQuery.onCreate的逻辑冗余，且未主动在初始化和点击时执行函数，同时需兼顾动态元素的监听需求。

优化后的代码 #

function initRanker() {
   if ($(".blueRow").parent().is(":visible")) {
    console.log("Blue i am visible");
    $(".blueCol").parent().show();
    $(".redCol").parent().hide();
    $(".greenCol").parent().hide();
    $(".sq-cardsort-bucket-c6").hide();
    $(".sq-cardsort-bucket-c7").hide();    
  }
  else if ($(".redRow").parent().is(":visible")){
    console.log("Red i am visible");
    $(".redCol").parent().show();
    $(".blueCol").parent().hide();
    $(".greenCol").parent().hide();
    $(".sq-cardsort-bucket-c5").hide();
    $(".sq-cardsort-bucket-c7").hide();    
  }
  else if ($(".GreenRow").parent().is(":visible")){
    console.log("Green i am visible");
    $(".greenCol").parent().show();
    $(".blueCol").parent().hide();
    $(".redCol").parent().hide();
    $(".sq-cardsort-bucket-c5").hide();
    $(".sq-cardsort-bucket-c6").hide();    
  } 
}

// 页面初始化：主动执行+监听动态元素
$(window).load(function() {
  // 立即执行一次，处理页面初始状态
  initRanker();
  // 监听所有动态创建的元素，确保后续新增元素触发逻辑
  jQuery.onCreate("*", initRanker);
});

// 点击事件：直接执行函数
$(window).click(function() {
  initRanker();
});

关键优化点 #

1. 初始状态主动触发：在页面加载完成后直接调用initRanker()，确保初始状态正确执行逻辑，而非仅依赖动态元素监听。
2. 简化点击事件绑定：无需为每个类单独绑定点击事件，统一在window.click中调用函数，覆盖所有点击场景。
3. 保留动态元素监听：jQuery.onCreate("*", initRanker)确保后续动态添加的元素也能触发逻辑，解决后续操作失效的问题。

如果jQuery.onCreate是自定义/第三方方法，若存在兼容性问题，可替换为原生DOM监听（注意缩小监听范围提升性能）：

$(document).on('DOMNodeInserted', 'row, col', initRanker);

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