【问题标题】:How I Can Get the Id of a li cicked我如何获得被许可人的 ID
【发布时间】:2016-09-28 20:41:58
【问题描述】:

我在 apex 4.2 中有一个从数据库生成的树:

<ul id="ltr">
<li id="00010" class="open"><a href="" style="" class=""><ins>&nbsp;</ins>Root</a>
<ul><li id="00110" class="open"><a href="" style="" class=""><ins>&nbsp;</ins>CHILD</a>
<ul><li id="00563" class="open"><a href="" style="" class=""><ins>&nbsp;</ins>CHILD</a>
<ul><li id="02057" class="leaf"><a href="" style="" class=""><ins>&nbsp;</ins>LAST CHILD</a></li>
</ul></li></ul>
</li>
</ul>
</li>
</ul>

我用click函数选择一个节点的id,用classleaf没问题,但是用open class选择parent和父id,如何选择被点击节点的id?

$(".leaf").click(function(){
        alert($(this).attr('id'));
    });


$(".open").click(function(){
        alert($(this).attr('id'));
    });

【问题讨论】:

    标签: jquery tree apex


    【解决方案1】:

    您需要使用 stopPropagation(),否则当点击内部元素时,您的事件监听器将针对所有三个嵌套元素执行。而且您不应该使用数字作为 ID。

    这是一个有效的小提琴:

    $(document).ready(function(){
      $(".open").click(function(e){
      		e.stopPropagation();
          alert($(this).attr("id"));
      });
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <ul id="ltr">
      <li id="a00010" class="open">
        <a href="" style="" class=""><ins>&nbsp;</ins>Root</a>
          <ul>
            <li id="a00110" class="open"><a href="#"><ins>&nbsp</ins>CHILD</a>
              <ul>
                <li id="a00563" class="open"><a href="#"><ins>&nbsp;</ins>CHILD</a>
                  <ul>
                    <li id="a02057" class="leaf"><a href="#"><ins>&nbsp;</ins>LAST CHILD</a></li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
      </li>
    </ul>

    编辑:如果您想选择 .open 和 .leaf,只需将选择器更改为:

    $(".leaf, .open")
    

    【讨论】:

    • 好吧,这只是一个小例子,但是 apex 会生成一棵以数字为 ID 的大树,我只想选择点击的节点的 id 而不选择父节点的 id
    • 我的示例也适用于数字 ID。但不建议这样做,因为这可能会导致问题。看到这个帖子:stackoverflow.com/questions/5672903/…
    • 感谢它完美运行,但我如何在 apex 4.2 的动态操作中使用它来控制树的选择。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2020-09-18
    • 2021-07-11
    • 2022-10-20
    • 1970-01-01
    • 1970-01-01
    • 2020-03-25
    • 1970-01-01
    相关资源
    最近更新 更多