jq循环添加html绑定动态数据及事件
程序员文章站
2022-07-14 11:45:21
...
$(function () {
let user =[
{
userId: '1',
title: '张三',
head: 'z'
},
{
userId: '2',
title: '张飞',
head: 'z'
}
,{
userId: '3',
title: '张飞1',
head: 'z'
}]
let html=''
for (let i = 0; i < user.length; i++) {
html+= '<label class="weui-cell weui-check__label userclic" for="' + user[i].userId + '" onclick = "changeState()" >'+
'<div class="weui-cell__bd">'+
'<p>' +user[i].title +'</p >'+
'</div>'+
'<div class="weui-cell__ft">'+
'<input type="radio" name="us" value="'+user[i].userId+'" class="weui-check" id="' + user[i].userId + '" checked="checked">'+
'<span class="weui-icon-checked">'+'</span>'+
'</div>'+
'</label>'
}
$.each(user,function (index,element) {//index选择器的index位置 element当前的元素(也可以用this选择器)
console.log(k,v)
html+=`
<label class="weui-cell weui-check__label userclic" for="${user[index].userId}" onclick = "changeState()" >
<div class="weui-cell__bd">
<p>(得${user[index].title}元)</p >
</div>
<div class="weui-cell__ft">
<input type="radio" name="us" value="${user[index].userId}" class="weui-check" id="${user[index].userId}" checked="checked">
<span class="weui-icon-checked"></span>
</div>
</label>
`
})
$(".apdn").append(html)
function changeState(ele) {
let doctorSex = $("input[name='us']:checked").val();
console.log( doctorSex);
}
$(document).ready(function(){
$("input").click(function(){
console.log(this)
});
});
推荐阅读
-
微信小程序 动态绑定数据及动态事件处理
-
JS动态添加元素及绑定事件造成程序重复执行解决
-
jq循环添加html绑定动态数据及事件
-
JS动态添加元素及绑定事件造成程序重复执行解决
-
jquery给动态添加的元素绑定事件(html元素拼接后事件失效)
-
动态添加的html元素绑定事件的方法
-
微信小程序 动态绑定数据及动态事件处理
-
JS动态添加元素及绑定事件造成程序重复执行解决
-
学习了vue中数据的挂载,vue实例的编写,数据的注入,数据的响应及vue的html长久文本html解析指令和vue的样式绑定及class类的绑定,input事件在vue双向绑定并复习了es6中的原生绑定及按照触发者的形式绑定
-
动态添加的html元素绑定事件的方法