鍍金池/ 問答/Linux  HTML/ js 動(dòng)態(tài)添加input節(jié)點(diǎn)并添加拼接字符串的點(diǎn)擊事件

js 動(dòng)態(tài)添加input節(jié)點(diǎn)并添加拼接字符串的點(diǎn)擊事件

頁(yè)面效果

clipboard.png

頁(yè)面代碼

clipboard.png

輸入結(jié)果

clipboard.png

當(dāng)我點(diǎn)擊左邊的添加圖片的按鈕時(shí)，動(dòng)態(tài)的在右邊添加一張圖片和文字，然后我在頁(yè)面上動(dòng)態(tài)地創(chuàng)建一個(gè)input節(jié)點(diǎn)，然后想要在input里添加一個(gè)拼接字符串的onchange事件，這該怎么做呢？請(qǐng)教大神們

回答
編輯回答
心上人

i是圖片的下標(biāo)，$('#arrImg li').length獲取頁(yè)面有多少個(gè)圖片
var i=$('#arrImg li').length-2;

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

2017年12月29日 14:54
編輯回答
心上人

在DOM渲染完成后新建的元素需要手動(dòng)在創(chuàng)建元素之后添加事件監(jiān)聽，可以不用寫在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>
2017年11月4日 11:24
編輯回答
薄荷綠

把字符串改成雙引號(hào)引著，類似下面這種
`var j = 0;
var tr = "<input type='text' onchange='get(this,"+j+")'/>";`

2017年8月15日 19:27
編輯回答
墻頭草

最好的方法是用事件代理或者叫委托。在arrimg上注冊(cè)事件

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

第二個(gè)參數(shù)和第一個(gè)參數(shù)可能寫反，要查文檔確認(rèn)一下

2017年7月30日 11:51