委托和自定义属性

委托和自定义属性

一、委托：

委托作用：

场景：需要制作模态对话框，对每一条记录都可以进行操作。

问题： 我们第一次访问页面，使用js对记录绑定了操作。但后续又使用js想网页中插入记录(新的html)。这时候新插入的记录并没有绑定一些需要的操作。

结论：这时候有两种方法，一是重新绑定，二是采用委托的方式。

-------------------------------------------------------------------js

$('tbody').on('click','.ch',function () {

//选中tbody，tbody下的class=‘ch’的元素都绑定click事件。

});

二、自定义属性

应用场景：在使用模态对话框的时候，需要从html标签中读取text,再将其放到模态对话框相应的标签中作为预览。

问题：当数据较少时，我们可以使用js选择元素中的text，然后放到模态对话框相应的位置。但如果数据量较大，又要便于修改时，我们使用自定义属性然后对该属性的兄弟(或父亲，或组合起来)的属性进行each操作。将大大的增加代码的灵活性。

结论：只需要修改 input标签的 name属性就可以用来标志是否要在模态对话框中填充它。

------------------------------------------------------------------django-html-表格

{% for cl in cls %}

<tr>

{# 自定义属性 wyl#}

<td wyl="id" >{{ cl.id }}</td>

<td wyl="sname">{{ cl.name}}</td>

<td wyl="semail">{{ cl.email}}</td>

<td wyl="scaption">{{ cl.cls.caption}}</td>

<td>

<a class="ch" href="#">修改</a> | <a id="del" class="del" href="#">删除</a>

</td>

</tr>

{% endfor %}

------------------------------------------------------------------django-html-模态对话框

<div class="modal"> {# 容器modal #}

<div id="add_info" class="add-info hide">

<input class="caption" name="scaption" type="text" name="caption">

{# 自定义属性 wyl#}

<input class="name" name="sname" type="text" name="caption">

{# name的值与自定义标签的值要一直，方便使用。l#}

<input class="email" name="semail" type="text" name="caption">

<input class="nid" name="id" type="text" style="display: none;">

<input class="submit" type="button" value="ajax提交">

<input class="cancel" type="button" value="取消">

</div>

</div>

------------------------------------------------------------------js

$(function () {

ch_element();

// 窗口加载完成时 执行ch_element()

});

function ch_element() {

$('tbody').on('click','.ch',function () {

$('.add-info').removeClass('hide');

//上面是委托功能

$(this).parent().prevAll().each(function () {

//选择所选中标签的父亲(也就是django-html-表格中td然后选中所有的兄弟，然后进行循环遍历。）

var text = $(this).text();

//获取文本信息

var name = $(this).attr('wyl');

//获取自定义属性的值

$('.modal input[name="' + name +'"]').val(text);

//在class = ’modal‘ 中的input(name = 自定义属性的值)的值被修改。

});

});

}