여러 페이지에서 동일한 HTML 조각 코드 사용_javascript 팁

문제 설명
상대적으로 복잡한 HTML 조각(A)이 있습니다. 이 HTML 조각이 다른 페이지(B, C, D...)에 포함되어 있는 경우입니다.
문제의 핵심은 페이징, 클릭 이벤트 응답 등 HTML 프래그먼트에서 처리해야 할 JavaScript 로직이 많다는 것입니다.

이 문제를 설명하기 위해 간단한 예를 사용합니다.
"페이지에 버튼이 있습니다. HTML 조각을 소개하려면 이 버튼을 클릭하세요. 이 HTML 조각에 페이징 버튼이 있습니다.

1. IFrame 사용
메인 페이지에서 버튼을 클릭하여 페이지에 IFrame을 소개합니다.

코드 복사 코드는 다음과 같습니다.

    <br>    <div id="complex_page_segment"> <br>        <input type="button" value="이전 페이지" class="이전"><br>        <input type="button" value="Next Page" class="next"><br>        <div class="content">페이지 콘텐츠</div> <br> </div> <br>   

由于我们需要多个页face引段, 这种方法导致大事情处理被复性拷贝粘贴, 밍显저는 이 방법을 이용하여 공개적으로 접근하고 있습니다.

3. ajax ， ，, 并调用页面片段中的函数注册事件

代码如下 :

   

   

   

    <br>    <script type="text/javascript"><BR>        function init_complex_page_segment() {<BR>            var parent = $("#complex_page_segment") ;<BR>            $(".previous", parent).click(function() {<BR>               $(".content", parent).html("이전 페이지 콘텐츠");<BR>           });<BR>            $(".next", parent).click(function() {<BR>                $(".content", parent).html("다음 페이지 콘텐츠");<BR>           });<BR>        }<BR>    </script><br>    <div id="complex_page_segment"> <br>        <input type="button" value="이전 페이지" class="이전"><br>        <br>        <div class="content">페이지 콘텐츠</div> <br>    </div> <br>

其实我们可以更进一步，完全没必要Hand工调用这个函数，而是可以返回的HTML Pictures 段中让其自动执行。

4. AJAX返回页面文段,其事件自动注册

复代码 代码如下:

   
   
   

   

    <br>    <script type="text/javascript"><BR>        $(function() {<BR>            var parent = $("#complex_page_segment");<BR>            $( ".previous", parent).click(function() {<BR>               $(".content", parent).html("이전 페이지 콘텐츠");<BR>            });<BR>            $(".next" ", parent).click(function() {<BR>                $(".content", parent).html("다음 페이지 콘텐츠");<BR>            });<BR>        });<BR>    < /script><BR>    <div id="complex_page_segment"><BR>        <input type="button" value="이전 페이지" class="previous" /><BR>        <input type=" 버튼" value="다음 페이지" class="next" /><BR>        <div class="content">페이지 콘텐츠</script>

   

    > ;

IFrame을 사용하여 IFrame을 사용하는 방법을 선택하세요.
下载源代码