2013-12-11 2 views
1

Я пытаюсь нажимать buton > li > a iframe содержит загрузку страницы в page_load_container div. он работает отлично, но при нажатии кнопки remove_frame я хочу очистить page_load_container div, но он не работает. спасибо заранее, помогите мне, пожалуйста.Попытка пустить родительский div iframe с помощью jQuery

JS

 <script> 
     $(document).ready(function() 
     { 
      $('.buton li a').click(function() 
      { 
       var page_name = $(this).attr('data-link'); 
       $('.page_load_container').empty(); 
       $('.page_load_container').append(' <a class="remove_frame">x</a><iframe  id=\"page_frame\" src=\"' + page_name + '\" style=\"height:auto; min-height:400px; width:100%\"></iframe>'); 

      }); 
     }); 
     $("#page_frame").load(function() 
     { 
      $('.remove_frame').click(function() 
      { 
       $(this).parent().empty(); 
       //$(this).parent().find('iframe').remove(); 

      }); 
     }); 
    </script> 

HTML

<div class="page_load_container"></div> 
<ul class="buton"> 
    <li> 
     <a data-link="page.html"></a> 
    </li> 
    <li> 
     <a data-link="page2.html"></a> 
    </li> 
    <li> 
     <a data-link="page3.html"></a> 
    </li> 
</ul> 
+0

вы пытались '$ ('remove_frame ') на (' нажмите', функция() {}); '?? – yashhy

+0

да, сэр я сделал, но его не работает – user2633451

+0

remove_frame - это кнопка внутри рамки? –

ответ

1

Вы устанавливаете событие OnLoad кадра, прежде чем он будет добавлен в DOM ..
Вот решение: http://jsfiddle.net/MKLwY

I mov ред событие OnLoad внутри OnClick обратного вызова

$(document).ready(function() 
    { 
     $('.buton li a').click(function() 
     { 
      var page_name = $(this).attr('data-link'); 
      $('.page_load_container').empty(); 
      $('.page_load_container').append(' <a class="remove_frame">x</a><iframe  id=\"page_frame\" src=\"' + page_name + '\" style=\"height:auto; min-height:400px; width:100%\"></iframe>'); 
      $("#page_frame").load(function() 
      { 
       $('.remove_frame').click(function() 
       { 
        $(this).parent().empty(); 
       } 
      }); 
     }); 
    }); 
0

Используйте JQuery по методу, как показано ниже:.

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title></title> 
     <script src="Scripts/jquery-1.10.2.min.js"></script> 
     <script> 
      $(document).ready(function() { 
       $('.buton li a').on('click', function() { 
        var page_name = $(this).data('link'); 
        var container = $('.page_load_container'); 
        container.html('<a class="remove_frame">x</a><iframe id=\"page_frame\" src=\"' + page_name + '\" style=\"height:auto; min-height:400px; width:100%\"></iframe>'); 
       }); 

       $(document).on('click', '.remove_frame', function() { 
        $(this).parent().empty(); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <div class="page_load_container"></div> 
     <ul class="buton"> 
      <li> 
       <a data-link="page.html">page.html</a> 
      </li> 
      <li> 
       <a data-link="page2.html">page2.html</a> 
      </li> 
      <li> 
       <a data-link="page3.html">page3.html</a> 
      </li> 
     </ul> 
    </body> 
    </html> 
Смежные вопросы