jQuery 动态创建右键菜单并修改鼠标右击元素的值( 解决 依次右击多个元素后,修改值的时候多个元素的值皆被修改的bug)
2017-03-03 10:08
691 查看
jquery 动态创建右键菜单并修改鼠标右击元素的值( 解决 依次右击多个元素后,修改值的时候多个元素的值皆被修改的bug)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="main.css"> <script src="jquery-1.11.3.js"></script> <style type="text/css"> .model01{ left:100px;top:100px; } .model02{ left:200px;top:200px; } .model03{ left:300px;top:300px; } .model04{ left:400px;top:400px; } .container{ width:100%; height: 1000px;} </style> <script> $(document).ready(function(){ var rtClick = function (ele, coords) { console.log(ele, ele.attr("id")); var publicData = {}; publicData.ele = ele; publicData.body = $("body"); var rtMenus = '<div class="rt_menus">' + '<div></div>' + '<label for="uid">ID:</label>' + '<input type="text" id="uid" disabled />' + '<div></div>' + '<label for="uname">名字:</label>' + '<input type="text" id="uname" />' + '</div>'; $(".rt_menus").remove();//加上此句解决 依次右击多个元素后,修改值的时候多个元素的值皆被修改的bug if (!publicData.body.find(".rt_menus")[0]) { publicData.body.append(rtMenus); } if (publicData.body.find(".rt_menus")[0]) { publicData.rtPanel = $(".rt_menus"); publicData.rtPanel.css({"left": coords.x, "top": coords.y}).find("#uid").val(ele.attr("id")); publicData.rtPanel.find("#uname").val(publicData.ele.html()); publicData.uname = publicData.rtPanel.find("#uname"); publicData.uname.change(function (e) { //菜单面板修改目标元素的值 publicData.ele.html($(this).val()); }); } }; $(".container").on('mousedown','.model', function (e) {//绑定事件可选择父元素container,不可选择最外层如body; if (e.which == 3) { rtClick($(this), {x: e.clientX, y: e.clientY}); } return false; }); document.oncontextmenu = function () { return false; }; $(".container").click(function () { $(".rt_menus").remove(); }); }); </script> </head> <body> <div class="container"> <p class="model model01" id="model01" >01</p> <p class="model model02" id="model02" >02</p> <p class="model model03" id="model03" >03</p> <p class="model model04" id="model04" >04</p> </div> </body> </html>
相关文章推荐
- 解决jquery动态创建元素绑定事件失效问题
- 通过jquery获得某个元素的位置, 透明div, 弹出框, 然后在旁边显示toggle子级联菜单-hover的bug解决
- 解决jquery动态创建元素绑定事件失效问题
- QT 创建鼠标右键菜单
- jquery formValidator插件ajax验证,在内容不做修改的前提下提示错误的bug解决方法
- 动态建立右键菜单(一级/二级/三级) 响应鼠标单击事件及修改项的内容
- QT右键菜单的创建及相关问题解决
- 鼠标右键“新建文本文档”菜单消失的解决方法
- 解决jQuery 1.2.6无法动态创建dialog问题
- JQuery动态创建DOM、表单元素的实现代码
- 注册表修改鼠标右键菜单
- 如何让动态创建的页面元素响应用户事件 (HTML/javascript/jQuery/Ajax/DOM)
- C#动态创建右键菜单
- Jquery的动态创建DOM元素
- 关于鼠标右键菜单的修改方法
- JQuery动态创建DOM、表单元素的实现代码
- QT 创建鼠标右键菜单
- 基于jquery的关于动态创建DOM元素的问题
- jquery formValidator插件ajax验证,在内容不做修改的前提下提示错误的bug解决方法
- 注册表修改鼠标右键菜单