Layui 동적 추가 노드 및 로드 스타일 문제 해결

장면
        전단 html 는 추가 단 추 를 누 른 후 기 존의 div 요소 에 여러 요 소 를 추가 해 야 합 니 다.
질문
1. js 제어 추가 요소
2. 추 가 된 스타일 후 렌 더 링 문 제 를 불 러 옵 니 다.
실현
1. js 동적 제어 추가 요소
단계 1: 맞 춤 법 문자열
        html 기 존의 div 를 바탕 으로 js 순환 맞 춤 법, 동적 제어 html 페이지 에 기록 하여 보 여 줍 니 다.
(1) html 페이지 에 있 는 div 코드 가 져 오기
        이곳 의 div 코드 는 군말 하지 않 겠 습 니 다. 바로 당신 의 프론트 데스크 톱 html 페이지 에서 자신 이 쓴 것 입 니 다. 그 다음 에 당신 이 나타 날 목표 코드 를 반복 해 야 합 니 다.
(2) js 맞 춤 법
        반복 적 으로 나타 나 려 면 공공 방법 을 쓰 는 것 이 좋 습 니 다.예 를 들 어 이 작은 편 의 는 다음 과 같다.

function dealInfo(  ){
    var str = "     div  ";
    return str
}

  단계 2: html 페이지 에 맞 춤 법 쓰기
        그리고 이벤트 맞 춤 법 을 클릭 하여 페이지 에 삽입 합 니 다.삽입 이 끝 난 후에 삽 입 된 요소 뒤에 삽입 해 야 할 대상 요 소 를 after () 방법 으로 연결 합 니 다. append () 방법 은 삽 입 된 요소 에 연결 되 기 때문에 append 를 사용 하지 않 고 after 를 사용 합 니 다.

addDeal:function () {
    if(0==cla){
        var str = dealInfo(cla);
        var nextNode =  "
";
        $("#dealBaseInfo").html(str);
        $("#dealBaseInfo").after(nextNode);
        form.render();
        cla++;
    }else{
        var str = dealInfo(cla);
        var nextNode = "
";
        $("#dealBaseInfo"+cla).html(str);
        $("#dealBaseInfo"+cla).after(nextNode);
        form.render();
        cla++;
    }
}

        略提一下，也是为了总结之后方便自己使用

①js按钮监听代码，如下易得，是根据myDlog来统一获取所有该样式的元素，若用该方式的话加上这个样式即可监听

    //     
    $('.myDialog').on('click', function() {
        var type = $(this).data('type'),
            url = $(this).data('url'),
            tit = $(this).children('cite').text();
        panelaction[type] ? panelaction[type].call(this) : '';
    });

② 페이지 코드 는 사용 버튼 감청 팀 에 맞 춰 위 에 조금 소개 되 었 습 니 다. 목표 요 소 를 찾 을 수 있 도록 데이터 - type 속성 을 추가 해 야 합 니 다.

      

③ 페이지 에 삽 입 된 html 코드 에 이 문장 을 더 하면 삽 입 된 대상 코드 가 있 습 니 다.

2. 추 가 된 스타일 후 렌 더 링 문 제 를 불 러 옵 니 다.
        이 문 제 는 매우 역겹다. 세심 한 동료 들 은 위의 코드 에서 내 가 페이지 코드 를 삽입 한 후에 form. render () 를 한 번 더 발견 해 야 한다. 이것 은 주로 css 스타일 을 해결 한 후에 문 제 를 불 러 오기 위 한 것 이다. 왜냐하면 사용 하 는 사람의 프레임 워 크 는 페이지 를 열 때 이미 이 스타일 을 한 번 불 러 왔 기 때문에 전면적 이거 나 부분 적 인 후에 css 스타일 을 불 러 와 야 한다.여기에 작은 편집 은 폼 form 에 쓰 여 있 습 니 다. 그 밖 에 table 도 있 습 니 다.그래서 form. render () 를 사용 하여 페이지 의 모든 form 스타일 을 다시 불 러 올 수 있 습 니 다.코드 는 다음 과 같 습 니 다.layui.define(['jquery', 'table','form'], function(exports) { $ = layui.$; form = layui.form; table = layui.table; // $('.myDialog').on('click', function() { var type = $(this).data('type'), url = $(this).data('url'), tit = $(this).children('cite').text(); panelaction[type] ? panelaction[type].call(this) : ''; }); var panelaction = { addDeal:function () { if(0==cla){ var str = dealInfo(cla); var nextNode = " "; $("#dealBaseInfo").html(str); $("#dealBaseInfo").after(nextNode); form.render(); cla++; }else{ var str = dealInfo(cla); var nextNode = " "; $("#dealBaseInfo"+cla).html(str); $("#dealBaseInfo"+cla).after(nextNode); form.render(); cla++; } } }); } });
        이상 이 모든 경험 총화 입 니 다.