Layui中Jquery动态设置的select标签加载时而正常时而失效问题排查和解决
生活随笔
收集整理的這篇文章主要介紹了
Layui中Jquery动态设置的select标签加载时而正常时而失效问题排查和解决
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.背景
前段使用Layui框架,jQuery動態設置的下拉框select標簽,加載時而正常時而失效。
本地調試完全沒有問題,但是在服務器運行加載成功和失敗的比例五五開。
2.解決
問題原因:Layui的form美化修飾和jQuery的select方法發生沖突,受渲染速度不同影響,最終的select異步加載成功與否也會不同。
解決方法:在使用jquery異步加載完成之后,調用Layui的重新渲染方法,對頁面重新渲染
如下:
<script type="text/javascript">$(function() {init();})//頁面初始化function init() {$.ajax({type: "post",url: "http://...",timeout : 30000,success: function(result) {var select = $("select[name=siteId]");var site = ${house.siteId}$.each(result.data, function(index, element) {var option = $("<option value='"+element.id+"'>"+element.name+"</option>");select.append(option); if(site == element.id){option.prop("selected",true)}})},error: function() {},async: false});//添加下面的代碼,重新渲染,可以有效避免加載失效問題layui.use('form', function(){var form = layui.form;form.render();});} </script>3.總結:
ajax改成同步請求!!!!!然后form.render()ajax改成同步請求!!!!!然后form.render()
轉自
總結
以上是生活随笔為你收集整理的Layui中Jquery动态设置的select标签加载时而正常时而失效问题排查和解决的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 这个习惯会害了你
- 下一篇: 如何进行产品战略规划