2015-01-25 5 views
2

загружают шаблоны в контейнер с функцией .load JQuery:скриптов не работают после загрузки шаблона JQuery

$('#container').load('templates/list.php'); 

Но когда он загружен, не работает какая-либо другая функция JQuery. Например, я загрузить шаблон:

<a href="#/phone" class="btn btn-primary btn-xs" id="phone_req">OK</a></div> 

и добавить к моим script.js

$('#phone_req').click(function(){ 
    console.log('Phone'); 
}); 

после загрузки, я нажимаю на кнопку, но ничего не случилось. Пожалуйста, скажите мне, где я ошибаюсь

ответ

1

Вам необходимо использовать .on() и добавить прослушиватель событий к родительскому элементу в тег <a>.

ли что-то вроде этого:

$('#container').on('click','a.btn',function(e){ 
    //do something... 
}); 

Подробнее здесь Event binding on dynamically created elements? и здесь jQuery docs .on()

+0

Спасибо, это работает! – Silver22

+0

ОК, чтобы решить эту проблему. Как загрузить значение из INPUT? .val Метод не работает – Silver22

+0

Прочитав код, который вы опубликовали, я не могу ответить на этот вопрос. Вы должны создать для него новый вопрос и разместить свой код javascript и HTML ... или, возможно, прочитать в документации jQuery? ;) – llernestal

0

Bro, Вы можете попробовать это

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Untitled Document</title> 
 
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> 
 

 
<style type="text/css"> 
 
    body{ 
 
\t \t margin:0; 
 
\t \t padding:0; 
 
\t \t overflow-x:hidden; 
 
\t } 
 
\t 
 
\t #container{ 
 
\t \t width:300px; 
 
\t \t height:200px; 
 
\t \t border:1px solid; 
 
\t } 
 
</style> 
 

 
</head> 
 

 
<body> 
 

 
    <div id="container"></div> 
 
    
 
    <a href="#/phone" class="btn btn-primary btn-xs" id="phone_req">OK</a></div> 
 
    
 
    <script> 
 
\t  $('#container').load('list.php'); 
 
\t \t $('#phone_req').click(function(){ 
 
      console.log('Phone'); 
 
\t \t \t 
 
     }); 
 
\t </script> 
 

 

 
</body> 
 
</html>

Смежные вопросы