.onClick不使用动态元素id

Question

我希望有人帮助我。我有一个任务.onClick事件使用动态元素触发一个函数。 当我解雇die（）函数，我有结果案例2，我的变量值是katiRun =＆＃34; .gn＆＃34 ;;但是在我点击（.gn）元素后它不起作用而另一些（＆＃34; .rd＆＃34;或＆＃34; .bl＆＃34;或＆＃34; .yl＆＃34;）分类元素正在运行功能运动。

**1.** 
<div class="player_board_white" data-kati-count="4">
                    <span class="bg-circle"><i class="kati rd" id="r1"></i></span>
                        <span class="bg-circle"><i class="kati rd" id="r2"></i></span>
                        <span class="bg-circle"><i class="kati rd" id="r3"></i></span>
                        <span class="bg-circle"><i class="kati rd" id="r4"></i></span>
                    </div>

**2.**
 <div class="player_board_white" data-kati-count="4">
                       <span class="bg-circle"><i class="kati gn" id="g1"></i></span>
                        <span class="bg-circle"><i class="kati gn" id="g2"></i></span>
                        <span class="bg-circle"><i class="kati gn" id="g3"></i></span>
                        <span class="bg-circle"><i class="kati gn" id="g4"></i></span>
                    </div>


**3.**
<div class="player_board_white" data-kati-count="4">
             <span class="bg-circle"><i class="kati bl" id="bl1"></i></span>
            <span class="bg-circle"><i class="kati bl" id="bl2"></i></span>
            <span class="bg-circle"><i class="kati bl" id="bl3"></i></span>
            <span class="bg-circle"><i class="kati bl" id="bl4"></i></span>
              </div>

**4.**
<div class="player_board_white" data-kati-count="4">
                        <span class="bg-circle"><i class="kati yl" id="y1"></i></span>
                        <span class="bg-circle"><i class="kati yl" id="y2"></i></span>
                        <span class="bg-circle"><i class="kati yl" id="y3"></i></span>
                        <span class="bg-circle"><i class="kati yl" id="y4"></i></span>
                    </div>

jquery代码

function die() {
    if (userHasBajji == 4) {
        userHasBajji = 1;
    }
    else {
        userHasBajji++;
    }


    switch (userHasBajji) {

        case 1:
            katiRun = ".rd"
            katiStartFrom = "t14"
            katiTurnFrom = "t12"
            break;

        case 2:
            katiRun = ".gn";
            katiStartFrom = "t27";
            katiTurnFrom = "t25"
            break;

        case 3:
            katiRun = ".bl";
            katiStartFrom = "t1";
            katiTurnFrom = "t51"
            break;

        case 4:
            katiRun = ".yl";
            katiStartFrom = "t40";
            katiTurnFrom = "t38"
            break;
    }





$(document).on("click", katiRun,  function (e) {
        $thisId = $(this).attr('id');
        console.log($thisId)
        Chal($thisId, katiStartFrom, katiTurnFrom);

    });

当我点击katiRun元素时，对另一个元素的函数效果