jquery - 响应页面无法在主页上调用 jquery 函数

Question

为什么响应页面（test.html）上的链接不能在主页面上调用jquery？尽管两个链接都具有相同的类，但请帮助我必须做些什么才能使其正常工作。

主页 ：

<script type="text/javascript">
      $(document).ready(function () {
        $(".comment_link").click(function () {
                $.ajax({
                    url: "test.html",
                    success: function (cont) {
                        if (cont) {
                            $("#view" ).append(cont);
                        }
                    }
                });
                return false;
    });
    });
    </script>

    <div id="view"></div>
    <a href="#" class="comment_link">add comment</a>

test.html 的文件内容：

    Helloo
    <a href="#" class="comment_link">Test</a>

Answer 1

您需要使用事件委托 -因为您正在comment_link动态添加

$(document).on('click',".comment_link",function (){...});

您需要像这样更改代码 -

$(document).ready(function () {
    $(document).on('click', ".comment_link", function () {
        $.ajax({
            url: "test.html",
            success: function (cont) {
                if (cont) {
                    $("#view").append(cont);
                }
            }
        });
        return false;
    });
});

Answer 2

该元素是“新”创建的，因此您必须将事件绑定到它...

使用on()方法。（曾经是live()但不推荐使用）

$('body').on('click','.comment_link',function(){..//your code here..});

所以你想把你的ajax放在一个函数中，这样你就可以在点击时调用它，并将它委托给新元素......无需重写代码......你不必这样做，只需让更容易重用等

  $(document).ready(function () {
     //Assign click handler         
     $('body').on('click','.comment_link', getAjax);

         //Your Ajax call put into function
         function getAjax(){
            $.ajax({
                url: "test.html",
                success: function (cont) {
                    if (cont) {
                        $("#view" ).append(cont);
                    }
                }
            });
            return false;
           };

  });