前端： jquery事件绑定及选择器使用动态变量

Posted 2020-10-25

目标与html代码

目标：点击jq删除，获取整行tr的id，（后端部分略，传递id处理即可），页面删除该tr行

  <tr myid="{{ cls.id }}">
     ....

      <td><a onclick="rmStu(this);" class="abc" href="#">jq删除</a></td>

【方式1】由onclick触发，点击位置由this传递

动态变量由字符串拼接

<script>
    function rmStu(th) {
    var myid=$(th).parent().parent().attr(‘myid‘);
    alert(myid);
{#    $(th).parent().parent().remove();#}
{#    $("[myid=‘11‘]").remove();#}
{#    $("[myid=myid]").remove();无法定位#}
    $("[myid="+myid+"]").remove();

    }
</script>

【方式2】事件绑定。点击触发，条件为任意class="abc"时。

触发时再由$(this)获取点击位置

<script>
    $(function () {
        bindEvent();
    });
    function bindEvent() {
        $(‘.abc‘).click(function () {
            var myid=$(this).parent().parent().attr(‘myid‘);
            alert(myid);

        })
    }

</script>

附录 bootstrap modal show

<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/plugin/bootstrap-3.3.7/js/bootstrap.js"></script>
<script>
    $(function () {
        abc();
    });
    function abc() {
        $(‘#showmyModal‘).click(function () {
            $(‘#myModal‘).modal(‘show‘);
        })
    }

</script>

【1】 点击即传递位置

【2】 点击触发函数，多处都可触发，之后获取位置

【3】 howto 动态id，绑定方式，点击即传递？