$.getJSON 调用 - 在元素上丢失点击事件 [重复]答案

【问题标题】：$.getJSON call - losing click event on element [duplicate]$.getJSON 调用 - 在元素上丢失点击事件 [重复]
【发布时间】：2014-07-11 01:26:11
【问题描述】：

任何人都可以告诉我为什么使用下面的代码我会在链接#1 和链接#2 上收到警报“Hello world”？

链接 #3 是在进行 ajax 调用后生成的，并且单击事件似乎根本不可用。我不知道为什么。

<!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>

【问题讨论】：

标签： jquery onclicklistener getjson

【解决方案1】：

Delegate你的click事件：

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

【讨论】：

应该使用最接近的DOM元素来提高性能，在OP情况下$("#message")

【解决方案2】：

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

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

查看“on”JQuery API 文档

【讨论】：

请阅读文章：learn.jquery.com/events/event-delegation
谢谢，成功了！就是这么简单... ;-))
很高兴它有帮助！不久前我遇到了这个问题，我挠头:)
您能否将其标记为已回答或投票 - 如果它对您有帮助，特里。谢谢！