在循环中执行$("input").trigger("click");不起作用

「已注销」 2018-06-15 09:45:34
需要将隐藏域的值分别填入input组对应 的input中

html代码


<div class="layui-form-item">

            <label class="layui-form-label"><b>团队介绍：</b></label>

            <div class="layui-input-block">

                <#if summarize.zeAffiliate ??>

                    <#list summarize.zeAffiliate as item>

                        <#if item.affiliatedType == "1">

                            <input type="text" id="personExt" name="personExt" autocomplete="off" class="layui-input" value="${item.ext!}">

                            <#else>

                            <input type="text" id="courseExt" name="courseExt" autocomplete="off" class="layui-input" value="${item.ext!}">

                        </#if>

                    </#list>

                </#if>

            </div>

        </div>

        <div class="layui-form-item layui-inline person" id="person">

            <label class="layui-form-label layui-required-tip">人物信息：</label>

            <div class="layui-input-inline">

                <input type="text" placeholder="姓名1" lay-verify="required" onkeyup="eventPersonMsg();" autocomplete="off" class="layui-input name1">

            </div>

            <div class="layui-input-inline">

                <input type="text" placeholder="职位1" lay-verify="required" onkeyup="eventPersonMsg();" autocomplete="off" class="layui-input position1">

            </div>

            <div class="layui-input-inline">

                <input type="text" placeholder="相关链接1" lay-verify="required" onkeyup="eventPersonMsg();" autocomplete="off" class="layui-input links1">

            </div>

            <div class="layui-input-inline">

                <a class="layui-btn layui-btn-normal" id="addperson"><i class="layui-icon"></i></a>

            </div>

        </div>

实现效果：

js代码


    layui.use(["jquery","form","laydate"],function () {

        var $ = layui.jquery,form = layui.form,laydate =layui.laydate,i=2,j=2,x,y;



//填入团队介绍信息

        personVal();

        function personVal() {

            var personExt = $("#personExt").val();

            var personExts =personExt.split('|');

            for(var s = 0;s < personExts.length;s++){

                var personItem = personExts[s].split(',');

                if(s >0){

                    $("#addperson").click();

                }

                $(".person .name"+(s+1)+"").val(personItem[0]);

                $(".person .position"+(s+1)+"").val(personItem[1]);

                $(".person .links"+(s+1)+"").val(personItem[2]);

            }

        }



//添加人物信息input组

        $("#addperson").on("click",function () {

            $("form .person:last").after(

                '<div class="layui-form-item layui-inline person">'+

                '<label class="layui-form-label" style="color: white;">人物信息：</label>'+

                '<div class="layui-input-inline">'+

                '<input type="text" placeholder="姓名'+i+'" lay-verify="required" onkeyup="eventPersonMsg();" autocomplete="off" class="layui-input name'+i+'"/>'+

                '</div><div class="layui-input-inline">'+

                '<input type="text" placeholder="职位'+i+'" lay-verify="required" onkeyup="eventPersonMsg();" autocomplete="off" class="layui-input position'+i+'">'+

                '</div><div class="layui-input-inline">'+

                '<input type="text" placeholder="相关链接'+i+'" lay-verify="required" onkeyup="eventPersonMsg();" autocomplete="off" class="layui-input links'+i+'">'+

                '</div><div class="layui-input-inline">'+

                '<a class="layui-btn layui-btn-normal" onclick="delePersonMsg(this)"><i class="layui-icon" style="font-size: 17px">ဆ</i></a>'+

                '</div></div>'

            );

            i++;

        });



//人物信息值填入隐藏域

        function personMsg(){

            var person ="";

            for(x=1;x <= i;x++){

                var name=($(".person .name"+x+"").val()=="undefined" ?"":$(".person .name"+x+"").val()+",");

                var position=($(".person .position"+x+"").val()=="undefined"?"":$(".person .position"+x+"").val()+",");

                var links=($(".person .links"+x+"").val()== ""?"":$(".person .links"+x+"").val()+"|");

                if(name.indexOf("undefined") == -1){

                    person +=name;

                    if(position.indexOf("undefined") == -1 ){

                        person +=position;

                        if(links.indexOf("undefined") == -1 ){

                            person +=links;

                        }

                    }

                }

            }

            return person;

        }

        window.eventPersonMsg=function(){

            $("#personExt").val(personMsg());

        }



//删除input组

        window.delePersonMsg = function(that) {

            that.parentNode.parentNode.remove();

            eventPersonMsg();

        }



})


调试$("#addperson").click();是执行了的，不知道为啥没起作用，没有报错

...全文
1304 13 打赏 收藏 转发到动态 举报
写回复
用AI写文章
13 条回复
切换为时间正序
请发表友善的回复…
发表回复
「已注销」 2018-06-19
  • 打赏
  • 举报
 回复
引用 12 楼 ambit_tsai 的回复:
[quote=引用 11 楼 qq_37349626的回复:][quote=引用 10 楼 ambit_tsai 的回复:] 我算是看出来了。 你在personVal中触发click事件，而这时click监听事件还没绑定！！！
代码顺序问题？还是？[/quote] personVal();执行在$('...').on('click')之前，你仔细看看，可惜你都结贴了 ╯▂╰[/quote]谢谢，这问题还真没想到，结贴太早了抱歉
ambit_tsai-微信 2018-06-19
  • 打赏
  • 举报
 回复
引用 11 楼 qq_37349626的回复:
[quote=引用 10 楼 ambit_tsai 的回复:] 我算是看出来了。 你在personVal中触发click事件，而这时click监听事件还没绑定！！！
代码顺序问题？还是？[/quote] personVal();执行在$('...').on('click')之前，你仔细看看，可惜你都结贴了 ╯▂╰
「已注销」 2018-06-19
  • 打赏
  • 举报
 回复
引用 10 楼 ambit_tsai 的回复:
我算是看出来了。 你在personVal中触发click事件，而这时click监听事件还没绑定！！！
代码顺序问题？还是？
「已注销」 2018-06-15
  • 打赏
  • 举报
 回复
引用 1 楼 qq_34408221 的回复:
你会不认为这样就能自动执行点击事件吧？
兄dei，感谢你的评论，给你个帖子先学习一下 https://blog.csdn.net/qq_22855325/article/details/72955628
「已注销」 2018-06-15
  • 打赏
  • 举报
 回复
引用 2 楼 ambit_tsai 的回复:
没看出问题，提几点供你参考。 
$("form .person:last")
从你贴出来的代码里没看到form，没漏掉吧？ 监听函数里打个断点，看看$("form .person:last")有正确获取吗？
没有漏，这里只是部分html，至于form .person:last，我原本是有一个input组.person【name1，position1，links1】的，所以新增在后面是没有问题,这个代码在新增时是测试过的，现在只是赋值
ambit_tsai-微信 2018-06-15
  • 打赏
  • 举报
 回复
引用 1 楼 qq_34408221 的回复:
你会不认为这样就能自动执行点击事件吧？

这样触发点击事件，没问题，官方API有提到
ambit_tsai-微信 2018-06-15
  • 打赏
  • 举报
 回复
没看出问题，提几点供你参考。
$("form .person:last")

从你贴出来的代码里没看到form，没漏掉吧？
监听函数里打个断点，看看$("form .person:last")有正确获取吗？
qq_34408221 2018-06-15
  • 打赏
  • 举报
 回复
你会不认为这样就能自动执行点击事件吧？
ambit_tsai-微信 2018-06-15
  • 打赏
  • 举报
 回复
我算是看出来了。 你在personVal中触发click事件，而这时click监听事件还没绑定！！！
「已注销」 2018-06-15
  • 打赏
  • 举报
 回复
自己解决了，解决办法，把添加点击事件中的代码放入循环中； 
personVal();
        function personVal() {
            var personExt = $("#personExt").val();
            if(personExt){
                var personExts =personExt.trim().split('|');
                for(var s = 0;s < personExts.length;s++){
                    var personItem = personExts[s].split(',');
                    if(s >0){
                        $("form .person:last").after(
                            '<div class="layui-form-item layui-inline person">'+
                            '<label class="layui-form-label" style="color: white;">人物信息：</label>'+
                            '<div class="layui-input-inline">'+
                            '<input type="text" placeholder="姓名'+i+'" lay-verify="required" onkeyup="eventPersonMsg();" autocomplete="off" class="layui-input name'+i+'"/>'+
                            '</div><div class="layui-input-inline">'+
                            '<input type="text" placeholder="职位'+i+'" lay-verify="required" onkeyup="eventPersonMsg();" autocomplete="off" class="layui-input position'+i+'">'+
                            '</div><div class="layui-input-inline">'+
                            '<input type="text" placeholder="相关链接'+i+'" lay-verify="required" onkeyup="eventPersonMsg();" autocomplete="off" class="layui-input links'+i+'">'+
                            '</div><div class="layui-input-inline">'+
                            '<a class="layui-btn layui-btn-normal" onclick="delePersonMsg(this)"><i class="layui-icon" style="font-size: 17px">ဆ</i></a>'+
                            '</div></div>'
                        );
                        i++;
                    }
                    $(".person .name"+(s+1)+"").val(personItem[0]);
                    $(".person .position"+(s+1)+"").val(personItem[1]);
                    $(".person .links"+(s+1)+"").val(personItem[2]);
                }
            }else{
                $("#groups").append('<input type="text" id="personExt" name="personExt" autocomplete="off" class="layui-input" style="display: none;"/>');
            }
        }
实现了功能，但是代码冗余了，不清楚为什么执行不成功，希望有大神路过帮忙解惑，感激不尽
「已注销」 2018-06-15
  • 打赏
  • 举报
 回复
引用 7 楼 oArthas123 的回复:
使用 $('#XX').on('#x','click') 试试
不可行
oArthas123 2018-06-15
  • 打赏
  • 举报
 回复
使用 $('#XX').on('#x','click') 试试
「已注销」 2018-06-15
  • 打赏
  • 举报
 回复
没人知道吗？
.trigger("click")默认进入页面时执行此方法
1 $(document).ready(function(){ $("input").select(function(){ $("input").after("文本被选中！"); }); $("button").click(function(){ $("input").trigger("select"); }).trigger("click"); 2 .trigger("click");为默认进
如何在AngularJS中使用$ scope。$ watch和$ scope。$ apply？
I don't understand how to use $scope.$watch and $scope.$apply . 我不明白如何使用$scope.$watch和$scope.$apply
关于Jquery中trigger方法失效的坑。
今天做项目的时候跳的坑，由于某些原因，初始化的时候要遍历循环每个节点，并触发其click事件。于是正常的写上$("XXX").trigger("click"); 写完之后发现并没有触发点击事件也没报错。 问题根源： 　　你只有在用jQuery创建click方法之后才能去触发click函数。即在建立click监听器之后再去使用trigger方法。 所以检查代码顺序是否符合要求。完了调整顺序就...
jQuery源码分析之jQuery.event.trigger及jQuery.Event十问
首先我们给出一个例子： HTML部分： JS部分： $("#n1").on("click",function(){alert("n1 ")}); $("#n2").on("click",function(){alert("n2 ")}); $("#n3")[0].onclick=function() { alert("click1 invoked!"); retur
解密jQuery事件核心 - 自定义设计（三）
接上文http://www.cnblogs.com/aaronjs/p/3447483.html  本文重点:自定义事件 “通过事件机制，可以将类设计为独立的模块，通过事件对外通信，提高了程序的开发效率。” 对象之间通过直接方法调用来交互 1）对象A直接调用对象B的某个方法，实现交互；直接方法调用本质上也是属于一种特殊的发送与接受消息，它把发送消息和接收消息合并为一个动作完成； 方法
JavaScript

87,993

社区成员

224,694

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章