Question

我是AJAX，jQuery和JavaScript的新手，所以我确信我在这里缺少一些简单的东西。这对我来说是个难题，但我会尽我所能。

我有两个html文件，index.html和news.html。我正在使用AJAX更新我在index.html文件中声明的div（其名称为contentDiv）。我在几个标签上使用class属性将信息传递到我的jQuery脚本中。

当我点击index.html页面上的链接将news.html加载到contentDiv时，它会正确加载。然后，我单击指向news.html文件上的.pdf文件的链接，但没有任何反应。我正在尝试用要求的.pdf替换news.html。

我在index.html中有以下内容

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="js/site.js"> </script>
<script src="js/bootstrap.min.js"></script>

<script>

    // Hide the "hideContent" link when the page loads
    $(document).ready(function(){
        $('.hideContent').hide();         // hide the hideContent button

        // AJAX to load pdfs into the contentDiv when the link is clicked
        var text;
        $('.pdf').click(function(){
            text = $(this).attr('text');
            var first = "'<object type=";
            var last = ' width="900" height="450"></object>';
            first = first.concat('"application/pdf" data=');
            first = first.concat(text);
            first = first.concat(last);
            first = first.concat("'");
            var pdfDiv = document.getElementById("contentDiv");
            pdfDiv.innerHTML=first;

            contentDivViewHelper();
            return false;
        })

        var url;
        $('.html').click(function(){
            url = $(this).attr('text');

            processContentDivRequest(url);
            return false;
        })
});//end of document.ready
        </script>

以下是index.html中的<a>标记，该标记正常运行：

<a id="termsAndConditions" class="pdf" href="#" text="pdf/TermsAndConditions.pdf">Terms and Conditions</a>

以下是也适用的news.html链接（此链接也位于index.html上）：

<a id="recentnewslink" class="html" href="#" text="news.html">Current News/Announcements</a>

问题是当我点击news.html文件中的这个链接时，没有任何反应：

<a id="pdf" class="pdf" href="#" text="Announcements/PriceAnnouncement20151201.pdf">

我在使用和不导入我在index.html文件中执行的相同.js文件以及使用和不使用index.html中的相同document.ready脚本时尝试了这一点。我会认为。在news.html中没有必要使用js import和document.ready代码，因为我使用ajax将news.html加载到index.html中，但这只是猜测。

有没有人对我出错的地方有任何想法？

由于

Answer 1

您需要委派事件：

$(function () {
  $(document).on("click", '.pdf', function(){
    text = $(this).attr('text');
    var first = "'<object type=";
    var last = ' width="900" height="450"></object>';
    first = first.concat('"application/pdf" data=');
    first = first.concat(text);
    first = first.concat(last);
    first = first.concat("'");
    var pdfDiv = document.getElementById("contentDiv");
    pdfDiv.innerHTML=first;

    contentDivViewHelper();
    return false;
  });
});

有关详细信息，请参阅Understanding Event Delegation。

jQuery .click没有被调用

1 个答案: