Вот index.html:
index.html
<head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.btn_test').click(function() { alert('test'); }); }); function add(){ $('body').append('<a href=\'javascript:;\' class=\'btn_test\'>test</a>'); } </script> </head> <body> <a href="javascript:;" class="btn_test">test1</a> <a href="javascript:;" onclick="add()">add</a> </body>
Если я нажимаю на ссылку test1, она показывает alert('test'), но если я нажимаю на ссылку add, то нажимаю test, это неничего не показывать.
test1
alert('test')
add
test
Не могли бы вы объяснить это?
Когда документ загружается, вы добавляете прослушиватели событий в каждый соответствующий класс, чтобы прослушивать событие click для этих элементов.Тот же слушатель не добавляется автоматически к элементам, которые вы добавляете в Dom позже.
Вам нужно добавить правильную функцию нажатия кнопки, чтобы получить правильный результат
$("#btn1").live(function() { alert("test"); });
Или просто запустите скрипт в конце вашей страницы