Question

任何人都可以告诉我为什么使用下面的代码我得到的警告“Hello world”仅在链接＃1和链接＃2上工作？

在执行ajax调用之后生成链接＃3，并且单击事件似乎根本不可用。我无法弄明白为什么。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Test Page</title>
    <script src="media/js/jquery-1.10.2.js"></script>
    <script src="media/js/jquery-ui.js"></script>
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function() {

          $("#message").append('<a href="#" class="view_comments" id="2">Link #2</a><br />\n');

          $(".view_comments").click(function() 
            {
            alert('Yes it worked!');
          });

          UpdateDiv();

          function UpdateDiv() {
            var var_1 = "1";
            var var_2 = "2";
            $.getJSON('file.php', {var1: var_1, var2 : var_2},function(json_result){
              $("#message").append('<a href="#" class="view_comments" id="3">Link #3</a><br />\n');
              $("#message").show();
            });
          }

        });
    </script>
    </head>
    <body>
        <div id="message" name="message"><a href="#" class="view_comments" id="1">Link #1</a><br /></div>
    </body>
</html>

Answer 1

Delegate您的click活动：

$('body').on( 'click', ".view_comments", function()

Answer 2

已为已加载的项目注册click事件。动态添加的任何元素似乎都没有注册该事件，因此点击事件不会起作用。至少，我之前遇到过这个问题。但以下将解决它。

 $(".view_comments").on("click",function(){
 {
       //alert('Yes it worked!');
 });

查看＆＃34; on＆＃34; JQuery API文档

$ .getJSON调用 - 在元素上丢失click事件

2 个答案: