jQuery .click not being called

Question

I'm new to AJAX, jQuery, and JavaScript, so I'm sure I'm missing something simple here. This is a hard problem for me to describe, but I'll do my best.

I have two html files, index.html and news.html. I'm using AJAX to update a div that I have declared in the index.html file (its name is contentDiv). I'm using the class attribute on several tags to pass information into my jQuery script.

When I click the link on the index.html page to load news.html into the contentDiv, it loads properly. I then click a link to a .pdf file that is on the news.html file and nothing happens. I'm trying to replace news.html with the .pdf requested.

I have the following in 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>

Here is an <a> tag in index.html that is working properly:

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

Here is the news.html link that also works (this link is also located on index.html):

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

The problem is when I click this link that is located in the news.html file, nothing happens:

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

I've tried this both with and without importing the same .js files that I do in the index.html file and both with and without the same document.ready script that is in index.html. I would think that the . js imports and document.ready code would not be necessary in news.html because I'm using ajax to load news.html into index.html, but that's just a guess.

Does anyone have any ideas on where I'm going wrong?

Thanks

@j08691 I believe you know the fact that a person with `6` reputation are not allowed in chat. Are they? — Praveen Kumar Purushothaman, Jan 12 '16 at 15:55
@j08691 [Chat](http://stackoverflow.com/help/privileges/chat) requires `20` Rep. `:)` — Praveen Kumar Purushothaman, Jan 12 '16 at 15:57

score 2 · Answer 1 · answered Jan 12 '16 at 15:44

2

You need to delegate events:

$(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;
  });
});

See Understanding Event Delegation for more information.

answered Jan 12 '16 at 15:44

Praveen Kumar Purushothaman

164,888
24
203
252

1

It's worth noting that delegation should occur at the closest parent to both the already existing and newly inserted elements. Event delegation at the `document` level can be highly inefficient depending on the complexity of the DOM structure. That being said, the OP didn't provide you with any more details on HTML structure so this demonstrates the principle as good as any. +1 – War10ck Jan 12 '16 at 15:47
@War10ck Thanks buddy. I shouldn't have answered but just in a good intention to get the OP to the right solution, I answered. Thanks buddy. – Praveen Kumar Purushothaman Jan 12 '16 at 15:49
No worries. It's a good and correct answer for sure. – War10ck Jan 12 '16 at 15:59
@War10ck Thanks again buddy. `:)` – Praveen Kumar Purushothaman Jan 12 '16 at 15:59
1

Works great, thank you! – CuriousOne Jan 12 '16 at 16:10

jQuery .click not being called

1 Answers1