jquery在弹出框中设置新增事件找不到传进的元素，函数中传入的参数在函数中的内部函数不能使用的问题（解决拖拽中input框不能用鼠标选择的问题的时候）

最新推荐文章于 2022-07-19 10:34:34 发布
最新推荐文章于 2022-07-19 10:34:34 发布
阅读量227 收藏
点赞数
分类专栏： 前端 文章标签： jquery 函数传值 弹出框添加元素 拖拽中input框
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28586119/article/details/100009412
版权

利用jquery在做一个拖拽的列表中，由于大的列表项会发生拖拽，而列表项中的新增表单中的input项用鼠标拖拽选择时会触发拖拽事件，所以需要将新建表单做成一个弹出框的样式，即将新增列表项的表单放到body的底部默认隐藏，通过鼠标点击来使表单显示并利用点击元素的位置来传递给表单使表单显示在鼠标单击的位置，然后遇到一个问题即在表单中点击提交按钮之后需要将表单中的信息组成一个列表项插入到所点击的列表，在这之中遇到传输传值的问题，将该问题简化成一个如下的demo。

<body>
    <div id="full">
        <div id="div1" class="child">2</div>
        <div id="div2" class="child">3</div>
    </div>
    <button class="submit">提交</button>
<script src="js/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        showdiv()
    })
    function showdiv() {
        $('body').on('click', '.child', function () {
            flag = true;
            nodeId = $(this).attr('id')
            console.log(nodeId);
            showId(nodeId);
        })
    }
    function showId(idName) {
        console.log(idName);
        nodeName = idName;
        $('.submit').on('click', function () {
            if (flag) {
                console.log(idName);
                console.log(nodeName);
                flag = false;
            } else {
                return;
            }
        })
    }
</script>
</body>

下面从头一步步拆解思路：
首先是通过点击获取到当前点击元素的id，然后通过传递参数的方法把参数传递给第二个函数，在第二个函数中没有点击事件的时候可以传递到正常的传输，例如：

<body>
    <div id="full">
        <div id="div1" class="child">2</div>
        <div id="div2" class="child">3</div>
    </div>
<script src="js/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        showdiv()
    })
    function showdiv() {
        $('body').on('click', '.child', function () {
            nodeId = $(this).attr('id')
            console.log(nodeId);
            showId(nodeId);
        })
    }
    function showId(idName) {
        console.log(idName);
    }
</script>
</body>

点击当前元素的时候可以正常打印出来所点击的元素的id
在这里插入图片描述
加上点击事件之后便会出现问题

<body>
    <div id="full">
        <div id="div1" class="child">2</div>
        <div id="div2" class="child">3</div>
    </div>
    <button class="submit">提交</button>
<script src="js/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        showdiv()
    })
    function showdiv() {
        $('body').on('click', '.child', function () {
            nodeId = $(this).attr('id')
            console.log(nodeId);
            showId(nodeId);
        })
    }
    function showId(idName) {
        console.log(idName);
        $('.submit').on('click', function () {
                console.log(idName);
        })
    }
</script>
</body>

当在调用的函数中用点击事件触发时，调用函数的触发会把之前点击的事件的值也打印出来，例如：
在这里插入图片描述
点击2，然后再点击提交按钮，会正常打印出div1的id，点击3，然后再点击提交按钮，会打印出div1和div2，然后再点击2，再点击提交，会打印出div1，div2和div1，会把之前的数值重新打印一边，为了解决这个问题，我们采用标记的形式，点击元素的时候设置标记为true，调用函数的时候再把标记位设置成false，这样可以避免多次触发。

<body>
    <div id="full">
        <div id="div1" class="child">2</div>
        <div id="div2" class="child">3</div>
    </div>
    <button class="submit">提交</button>
<script src="js/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        showdiv()
    })
    function showdiv() {
        $('body').on('click', '.child', function () {
            flag = true;
            nodeId = $(this).attr('id')
            console.log(nodeId);
            showId(nodeId);
        })
    }
    function showId(idName) {
        console.log(idName);
        $('.submit').on('click', function () {
            if (flag) {
                console.log(idName); 
                flag = false;
            } else {
                return;
            }
        })
    }
</script>
</body>

这样的话，点击提交按钮的时候回调函数中的事件就会只能触发一次，效果如下
在这里插入图片描述
点击2，然后点击提交，点击3，然后点击提交，均只会回调一次，但是第二次点击打印出来的却是第一次点击传过来的参数，这时候我们需要再点击原来元素的时候调用的函数中将传过来的参数赋值给一个变量，然后在点击事件中打印这个变量，这样便可以打印出来正确的值了。

<body>
    <div id="full">
        <div id="div1" class="child">2</div>
        <div id="div2" class="child">3</div>
    </div>
    <button class="submit">提交</button>
<script src="js/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        showdiv()
    })
    function showdiv() {
        $('body').on('click', '.child', function () {
            flag = true;
            nodeId = $(this).attr('id')
            console.log(nodeId);
            showId(nodeId);
        })
    }
    function showId(idName) {
        console.log(idName);
        nodeName = idName;
        $('.submit').on('click', function () {
            if (flag) {
                console.log(idName+”传递过来的值“);
                console.log(nodeName+”赋值的变量“);
                flag = false;
            } else {
                return;
            }
        })
    }
</script>
</body>

效果如下，点击2，然后点击提交，点击3，然后点击提交，点击2，然后点击图标，虽然传递过来的值打印仍然会有问题，但是我们通过赋值的变量，可以正确的返回点击元素的id，我们可以通过这个id来正确的将弹出框中的表单所创建的dom节点插入到点击的列表中了
在这里插入图片描述
实际项目的效果和代码如下：
项目效果图：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
代码：
列表

            <div class="clause_task_blocks nodrag">
                <div class="clause_task_blotit">
                    <div style="display: flex;align-items: flex-end">
                        <div class="clause_task_blotitname">项目评估</div>
                        <div class="clause_task_blotitnum">3</div>
                    </div>
                    <div class="clause_task_blotitmore"></div>
                </div>
                <div class="clause_task_main">
                    <div id="taskitem1" class="clause_task_items">
                        <div class="clause_task_item">
                            <div class="clause_task_item_imp imp3"></div>
                            <div class="clause_task_item_select">
                                <div class="clause_task_item_selectbox">
                                    <img class="select-checkbox" src="images/finish2.png">
                                </div>
                            </div>
                            <div class="clause_task_item_body">
                                <div class="clause_task_item_title">项目启动会</div>
                                <div class="clause_task_item_icon" style="display: none"></div>
                            </div>
                        </div>
                        <div class="clause_task_item">
                            <div class="clause_task_item_imp imp3"></div>
                            <div class="clause_task_item_select">
                                <div class="clause_task_item_selectbox">
                                    <img class="select-checkbox" src="images/finish1.png">
                                </div>
                            </div>
                            <div class="clause_task_item_body">
                                <div class="clause_task_item_title">项目启动会项目启动会项目启动会项目启动会项目启动会项目启动会项目启动会项目启动会项目启动会项目启动会项目启动会项目启动会</div>
                                <div class="clause_task_item_icon" style="display: none"></div>
                            </div>
                        </div>
                        <div class="clause_task_item">
                            <div class="clause_task_item_imp imp3"></div>
                            <div class="clause_task_item_select">
                                <div class="clause_task_item_selectbox">
                                    <img class="select-checkbox" src="images/finish1.png">
                                </div>
                            </div>
                            <div class="clause_task_item_body">
                                <div class="clause_task_item_title">项目启动会</div>
                                <div class="clause_task_item_icon">
                                    <span class="iconfont icon-xiewrite18"></span>
                                    <span class="clause_task_item_iconnum">1/2</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="clause_task_item_add">
                        <div class="clause_task_item_addicon">+</div>
                        <div class="clause_task_item_addicon_local" style="display: none"></div>
                    </div>
                </div>
            </div>
            <div class="clause_task_blocks">
                <div class="clause_task_blotit">
                    <div style="display: flex;align-items: flex-end">
                        <div class="clause_task_blotitname">项目评估</div>
                        <div class="clause_task_blotitnum">3</div>
                    </div>
                    <div class="clause_task_blotitmore"></div>
                </div>
                <div class="clause_task_main">
                    <div id="taskitem2" class="clause_task_items">
                        <div class="clause_task_item">
                            <div class="clause_task_item_imp imp3"></div>
                            <div class="clause_task_item_select">
                                <div class="clause_task_item_selectbox">
                                    <img class="select-checkbox" src="images/finish1.png">
                                </div>
                            </div>
                            <div class="clause_task_item_body">
                                <div class="clause_task_item_title">项目启动会</div>
                                <div class="clause_task_item_icon" style="display: none"></div>
                            </div>
                        </div>
                        <div class="clause_task_item">
                            <div class="clause_task_item_imp imp3"></div>
                            <div class="clause_task_item_select">
                                <div class="clause_task_item_selectbox">
                                    <img class="select-checkbox" src="images/finish1.png">
                                </div>
                            </div>
                            <div class="clause_task_item_body">
                                <div class="clause_task_item_title">项目启动会项目启动会项目启动会项目启动会项目启动会项目启动会项目启动会项目启动会项目启动会项目启动会项目启动会项目启动会</div>
                                <div class="clause_task_item_icon" style="display: none"></div>
                            </div>
                        </div>
                        <div class="clause_task_item">
                            <div class="clause_task_item_imp imp3"></div>
                            <div class="clause_task_item_select">
                                <div class="clause_task_item_selectbox">
                                    <img class="select-checkbox" src="images/finish1.png">
                                </div>
                            </div>
                            <div class="clause_task_item_body">
                                <div class="clause_task_item_title">项目启动会</div>
                                <div class="clause_task_item_icon">
                                    <span class="iconfont icon-xiewrite18"></span>
                                    <span class="clause_task_item_iconnum">1/2</span>
                                </div>
                            </div>
                        </div>
                        <div class="clause_task_item">
                            <div class="clause_task_item_imp imp3"></div>
                            <div class="clause_task_item_select">
                                <div class="clause_task_item_selectbox">
                                    <img class="select-checkbox" src="images/finish1.png">
                                </div>
                            </div>
                            <div class="clause_task_item_body">
                                <div class="clause_task_item_title">项目启动会</div>
                                <div class="clause_task_item_icon" style="display: none"></div>
                            </div>
                        </div>
                        <div class="clause_task_item">
                            <div class="clause_task_item_imp imp3"></div>
                            <div class="clause_task_item_select">
                                <div class="clause_task_item_selectbox">
                                    <img class="select-checkbox" src="images/finish1.png">
                                </div>
                            </div>
                            <div class="clause_task_item_body">
                                <div class="clause_task_item_title">项目启动会</div>
                                <div class="clause_task_item_icon" style="display: none"></div>
                            </div>
                        </div>
                        <div class="clause_task_item">
                            <div class="clause_task_item_imp imp3"></div>
                            <div class="clause_task_item_select">
                                <div class="clause_task_item_selectbox">
                                    <img class="select-checkbox" src="images/finish1.png">
                                </div>
                            </div>
                            <div class="clause_task_item_body">
                                <div class="clause_task_item_title">项目启动会</div>
                                <div class="clause_task_item_icon" style="display: none"></div>
                            </div>
                        </div>
                        <div class="clause_task_item">
                            <div class="clause_task_item_imp imp3"></div>
                            <div class="clause_task_item_select">
                                <div class="clause_task_item_selectbox">
                                    <img class="select-checkbox" src="images/finish1.png">
                                </div>
                            </div>
                            <div class="clause_task_item_body">
                                <div class="clause_task_item_title">项目启动会</div>
                                <div class="clause_task_item_icon" style="display: none"></div>
                            </div>
                        </div>
                        <div class="clause_task_item">
                            <div class="clause_task_item_imp imp3"></div>
                            <div class="clause_task_item_select">
                                <div class="clause_task_item_selectbox">
                                    <img class="select-checkbox" src="images/finish1.png">
                                </div>
                            </div>
                            <div class="clause_task_item_body">
                                <div class="clause_task_item_title">项目启动会</div>
                                <div class="clause_task_item_icon" style="display: none"></div>
                            </div>
                        </div>
                    </div>
                    <div class="clause_task_item_add">
                        <div class="clause_task_item_addicon">+</div>
                        <div class="clause_task_item_addicon_local" style="display: none"></div>
                    </div>
                </div>
            </div>

js代码：注释的为该效果的代码

<script>
    $(document).ready(function ()
        sort();
        showAddItem();    //调用显示表单框的函数
        showAddBlo();
        addTaskBlo();
        hideAdd();
        buttonColor();
        selectCheckBox()
    });
    //显示出弹出框的函数
    function showAddItem() {
        $('body').on('click','.clause_task_item_addicon', function (e) {
            e.stopPropagation();
            flag = true;
            $(this).hide();
            $(this).next().show();
            let x = $(this).next().offset().left;
            $('#additem').show();
            $('#additem').css('left', x);
            addNodeId = $(this).parent().prev().attr('id');
            addTaskItem(addNodeId);
        })
    }
   function showAddBlo() {
       $('body').on('click','.clause_task_bloadd', function (e) {
           e.stopPropagation();
           $(this).next().show();
       })
   }
    function hideAdd() {
       $('body').on('click','.clause_task_additem', function (e) {
           e.stopPropagation()
       })
        $('body').on('click','.clause_task_addblo', function (e) {
            e.stopPropagation()
        })
        $('body').on('click',function () {
            hidefrom()
        })
    }
    function hidefrom() {
        $('.clause_task_additem').hide();
        $('.clause_task_addblo').hide();
        $('.clause_task_item_addicon').show();
    }
    //通过弹出框增加列表的函数
    function addTaskItem(addNodeId) {
        addNode = addNodeId;
        $('body').on('click', '.clause_task_additem_submit',function (e) {
            if(flag){
                e.stopPropagation();
                let nodeValue = $(this).parent().prev().find('input').val();
                let divNode = '<div class="clause_task_item">\n' +
                    '                            <div class="clause_task_item_imp imp3"></div>\n' +
                    '                            <div class="clause_task_item_select">\n' +
                    '                                <div class="clause_task_item_selectbox">\n' +
                    '                                    <img class="select-checkbox" src="images/finish1.png">\n' +
                    '                                </div>\n' +
                    '                            </div>\n' +
                    '                            <div class="clause_task_item_body">\n' +
                    '                                <div class="clause_task_item_title">'+ nodeValue +'</div>\n' +
                    '                                <div class="clause_task_item_icon" style="display: none">\n' +
                    '                                    <span class="iconfont icon-xiewrite18"></span>\n' +
                    '                                    <span class="clause_task_item_iconnum"></span>\n' +
                    '                                </div>\n' +
                    '                            </div>\n' +
                    '                        </div>';
                $(this).parent().prev().find('input').val('');
                $("#"+addNode).append(divNode);
                hidefrom();
                flag = false;
            } else {
                return
            }
        })
    }
    function addTaskBlo() {
        $('.clause_task_addblo_submit').on('click', function () {
            let nodeValue = $(this).parent().prev().find('input').val();
            let divNode = '<div class="clause_task_blocks">\n' +
                '                <div class="clause_task_blotit">\n' +
                '                    <div style="display: flex;align-items: flex-end">\n' +
                '                        <div class="clause_task_blotitname">'+ nodeValue +'</div>\n' +
                '                        <div class="clause_task_blotitnum">0</div>\n' +
                '                    </div>\n' +
                '                    <div class="clause_task_blotitmore"></div>\n' +
                '                </div>\n' +
                '                <div class="clause_task_main">\n' +
                '                    <div id="taskitem7" class="clause_task_items">\n' +
                '                    </div>\n' +
                '                    <div class="clause_task_item_add">\n' +
                '                        <div class="clause_task_item_addicon">+</div>\n' +
                '                       <div class="clause_task_item_addicon_local" style="display: none"></div>\n' +
                '                    </div>\n' +
                '                </div>\n' +
                '            </div>'
            $(this).parent().parent().parent().parent().before(divNode);
            $(this).parent().prev().find('input').val('');
            hidefrom();
            sort();
        })
    }
    function buttonColor() {
        $('body').on('input propertychange', 'input', function () {
            let inpValue = $(this).val();
            if(inpValue.length == 0){
                $(this).parent().next().find('button').addClass('clause_task_addblo_submitfalse');
                $(this).parent().next().find('button').removeClass('clause_task_addblo_submittrue');
            }else {
                $(this).parent().next().find('button').removeClass('clause_task_addblo_submitfalse');
                $(this).parent().next().find('button').addClass('clause_task_addblo_submittrue');
            }
        })
    function selectCheckBox() {
        $('body').on('click','.select-checkbox',function () {
            var divsrc = $(this).attr("src");
            console.log(divsrc)
            if(divsrc == 'images/finish1.png'){
                $(this).attr('src','images/finish2.png')
            }else {
                $(this).attr('src','images/finish1.png')
            }
        })
    }
    function sort() {
        var taskblo = document.getElementById('taskblo');
            lists = document.getElementsByClassName('clause_task_items');
            list = [];
            for (let i = 0; i < lists.length; i++){
                list[i] = document.getElementById(lists[i].id)
            }
        new Sortable(taskblo, {
            animation: 100
        })
        for (let i = 0; i < list.length; i++){
                new Sortable(list[i], {
                    group: 'list',
                    animation: 100
                })
        }

    }

</script>
郝强强1994
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html列表拖拽排序插件,JS拖拽排序插件Sortable.js用法实例分析
weixin_36325338的博客
06-16 773
本文实例讲述了JS拖拽排序插件Sortable.js用法。分享给大家供大家参考，具体如下：最近由于项目功能设计的原因，需要对table中的行实现拖拽排序功能，找来找去发现Sortable.js能很好的满足这个需求，而且它还是开源的，于是乎就开始学习使用Sortable.js，再然后就有了这篇文章。特点：轻量级但功能强大移动列表项时有动画支持触屏设备和大多数浏览器(IE9及以下除外)支持单个列表容器...
c语言参数不能用 吗,如何在C语言中禁止“未使用的参数”警告？
weixin_30467861的博客
05-18 554
您可以使用gcc / clang的未使用属性，但是我在标头中使用这些宏，以避免在整个源代码中__attribute__都有gcc特定的属性，而且到处都有点冗长/难看。#ifdef __GNUC__# define UNUSED(x) UNUSED_ ## x __attribute__((__unused__))#else# define UNUSED(x) UNUSED_ ## x#endi...
前端使用Sortable拖拽排序插件,里面的input.textarea光标无法移动的解决
dongyan3595的博客
11-26 1272
var sort = Sortable.create(container, { animation: 500, // ms, animation speed moving items when sorting, `0` — without animation handle: ".upload-goods-sort", // Restricts sort start click/touch to the specified element draggable: ".upload-g.
JQuery遍历对象遇到找不到函数或TypeError问题
没有人是一座孤岛
04-02 937
使用JQuery遍历JQuery对象时，要区分遍历时得到的是Dom对象还是JQuery对象，如果是Dom对象则不能使用JQuery的函数，否则会出现找不到函数或者TypeError问题。 JQuery对象是一个类似数组的对象，提供了两种方法可以将JQuery对象转换成DOm对象。 var $list=$("#equiplist" ).children(); for(var i=0;i
Jquery获取不到元素
weixin_44653963的博客
02-08 1776
Jquery获取不到元素 最近在做需求时，需要获取一个div的id对该div包裹的画面进行删除。 var deleteCharts = "combinationdeleteId"+delChartArray[j]; $("#"+deleteCharts).remove();//删除选`在这里插入代码片`中的单个生成画面 然后发现无论如何都删除不掉，原因为无法获取到该元素。 debugger后发现 原因为：Jquery无法获取值中带其他字符的元素，就比如现在这个id中带有逗号：“ , ”
定义一个函数，传入一个字典和一个元组，key不变将字典的值与元组的值进行交换，返回交换后的字典和元组
charene的博客
02-22 2965
#定义一个函数，传入一个字典和一个元组，key不变将字典的值与元组的值进行交换，返回交换后的字典和元组 def function(*args,**kwargs): a = kwargs.keys() b = kwargs.values() result = dict(zip(a,args)),tuple(b) print(result) function(1,2,...
3-1. jQuery学习导入（jQuery文件引入、函数$、等待页面加载完毕）
淡泊以明志，宁静以致远
01-18 1233
从JS到 jQuery: jQuery、jQueryUI、jQuerymobile 客户端JS的功能： 对浏览事件做出响应 在数据被提交到服务器之前验证数据 检测访客的浏览信息 控制cookie信息 其实还有服务器端JS 为什么要使用jQuery？ 最主要是解决浏览器器兼容问题 jQuery能够做什么？ 轻松获取文档中的元素、修改页面外观、改变文档内容、响应用户...
jquery弹窗组件修改（踩坑记录）
weixin_43939111的博客
11-10 1578
目录一、$.confirm()确定及取消操作没反应二、修改$.confirm样式三级目录 一、$.confirm()确定及取消操作没反应 二、修改$.confirm样式 三级目录         事情是这样se儿的，之前用vue打包好的项目被嫌弃占内存偏大，要求用原生js重新编写页面，然后就开启了与jq斗智斗勇的过程。其中，用到与el-ui中this.$confirm与this.$notify相似的弹框组件，下面放两张图感受一
关于a标签包裹input后，输入input的值无法鼠标拖拽选中
Abez_c的博客
09-28 2847
【jQuery】如何添加自定义函数及封装自定义插件_09
最新发布
青春木鱼的博客
07-19 971
今后，如果想用的功能，jquery没有提供，我们可以向jquery中添加自定义的新函数；自定义插件拥有专属的HTML+CSS+JS的可重用的页面上独立的功能区域，今后只要页面上发现一个可以反复使用的功能区域，都要先封装为插件，再反复使用插件............
禁止鼠标多次点击选中div中的文字
xiliuhu的专栏
10-18 2127
来源：http://www.cnblogs.com/myjiejie/archive/2010/12/04/1896327.html 今天遇到一个很少有的问题  做div的点击计数事件  因为里面有文字 所以 当点击多次时  文字老被选中  可郁闷了   查了查资料
JS事件调试 - 查找HTML元素绑定的事件以及绑定代码所在位置
weixin_30537391的博客
06-26 364
日常的网页开发调试工作中，经常需要知道指定的某个网页元素绑定了哪些事件以及绑定代码的位置，下面介绍三种用来跟踪页面中的事件的方法。 1、使用firefox调试 我们可以使用firefox的debug工具，找到指定元素，然后查看事件面板 2、使用chrome调试 在要检查的元素上单击右键选择查看元素，然后，右边的面板中会显示style标签，切换到EventListenrs标签，可以看到相...
在使用Jquery时，不能调用另外一个JS文件中的函数
tyl19971224的博客
06-29 840
在使用Jquery时，不能调用另外一个JS文件中的函数 其被调用函数形式必须写为 Test=function(){} //正确形式 function Test(){} //错误形式

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值