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

【问题标题】：Response page cannot call jquery function on main page响应页面无法在主页上调用 jquery 函数
【发布时间】：2013-06-24 18:30:44
【问题描述】：

为什么响应页面（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>

【问题讨论】：

标签： jquery ajax class response

【解决方案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;
    });
});

【讨论】：

您需要用我发布的内容替换脚本标签中的所有代码 - 在 您需要像这样更改代码之后

【解决方案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;
           };

  });

【讨论】：