按鈕的html
<!-- 學校 --> <div class="layui-inline"> <label class="layui-form-label"> <button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="yun.popOpen('/out/school/crmAddSchool', '添加學校信息','690','400')" title="#(i18n.get('新增學校'))"> <i class="layui-icon"></i> </button> #(i18n.get('學校')) </label> <div class="layui-input-inline"> <select id="school" name="personStudent.schoolId" onchange="yun.casSel(this,'/out/school/casSelName','grade')" lay-verify="" > <option ></option> #for(school : schools ) <option value="#(school.id)">#(school.schoolName)</option> #end </select> </div> </div>
問題:項目中出現的問題,學校前邊有一個按鈕是使用label包裹了button,給button添加了點擊事件,每次點擊的時候label總是會觸發button的點擊事件?
答案: 這個主要是label的綁定元素的問題,包裹元素即綁定了某個元素,那么給這個元素設置事件的時候等同於label也會會有事件了,這樣點擊button會觸發事件,點擊label也會觸發事件。
想要的結果:這里的樣式就是需要這樣的,不可以改變。但是點擊button觸發事件,點擊label不觸發事件。
解決辦法:這里主要是用到了layui的樣式,所以只需要把label改成其他的標簽就可以了,他的class保留,這樣樣式就保留下來了。
<!-- 學校 --> <div class="layui-form-label"> <button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="yun.popOpen('/out/school/crmAddSchool', '添加學校信息','690','400')" title="#(i18n.get('新增學校'))"> <i class="layui-icon"></i> </button> #(i18n.get('學校'))
</div>
這樣就可以實現了。
這里介紹了官方的示例:
w3c示例
顯式綁定
<form> <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female">Female</label> <input type="radio" name="sex" id="female" /> </form>
提示和注釋
注釋:可以通過使用 "for" 屬性將 label 綁定到另一個元素,或者直接在 label 元素內部放置元素。
使用for為lable關聯指定的元素上,這樣點擊label的時候就等於是點擊了綁定的元素。
這種使用for標簽的方式是顯示的方式
隱式的方式是把需要綁定的標簽放到label內部,讓label包裹上這個需要綁定的元素
隱式綁定
<!DOCTYPE HTML> <html> <body> <form> <label>Male<input type="radio" name="sex" /></label> <br /> <label>Female <input type="radio" name="sex" /></label> </form> </body> </html>
這樣不使用for就可以綁定。