分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

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

发布时间:2023-09-06 01:44责任编辑:白小东关键词:前端选择器

目标与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,绑定方式,点击即传递?

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

原文地址:http://blog.51cto.com/13606158/2074340

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved