js 动态添加input节点并添加拼接字符串的点击事件

页面效果

clipboard.png

页面代码

clipboard.png

输入结果

clipboard.png

当我点击左边的添加图片的按钮时,动态的在右边添加一张图片和文字,然后我在页面上动态地创建一个input节点,然后想要在input里添加一个拼接字符串的onchange事件,这该怎么做呢?请教大神们

阅读 8.8k
4 个回答

i是图片的下标,$('#arrImg li').length获取页面有多少个图片
var i=$('#arrImg li').length-2;

// 给input添加onclick事件
div3.setAttribute("onclick", "getPhoto(this,"+i+")");

最好的方法是用事件代理或者叫委托。在arrimg上注册事件

$('#arrimg').on('change', 'input', function(e) {
})

第二个参数和第一个参数可能写反,要查文档确认一下

把字符串改成双引号引着,类似下面这种
`var j = 0;
var tr = "<input type='text' onchange='get(this,"+j+")'/>";`

在DOM渲染完成后新建的元素需要手动在创建元素之后添加事件监听,可以不用写在html里。

例子:


    <body>
        <button id="add" onclick="add()">Add</button>

        <script>
            function add() {
                let btn = document.getElementById("add");
                let added = document.createElement('input', {
                    id: 'input',
                    value: 'empty'
                });
                added.addEventListener('change', function () {
                    console.log(1);
                });
                document.getElementsByTagName('body')[0].appendChild(added);
            }
        </script>
    </body>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题