Jquery won't fire after postback

I have a jquery where we are trying to track what documents our users are viewing in our Document Library.  Users can upload a document and there is a pagination widget as well.

This is the jquery

$(document).ready(function(){  //
  $(".FileCabinet a").click(function () {
                    //$(document).on("click", "a", function() {
       
  if (! $(this).attr("href") ) {
     
     return;
  }
  else {  
      var href = $(this).attr("href");
      var mystring = href.replace(/.*\?/,'');  //remove everything before the ?
      var mystring1 = mystring.replace(/\&.*/,''); //remove the hash key
      var mystring2 = mystring1.replace(/[^\d\.]/g, ''); // remove non-numerics
  }  
   
alert(href);
   
  $.ajax({
    type: "POST",
    url: "/CMSPages/WebService.asmx/WhoClicked",
    data: JSON.stringify({ DocumentID: mystring2}),
    contentType: "application/json",
    success: function (data) {
      // Do something on sucess
    },
   
    error: function(jqXHR, status, errorThrown) {
      // Do something on failure
    }
  });
 
  });
 
  });
 
Whenever there is a partial postback, the jquery does not fire anymore.  I am assuming it has something to do with the document ready function.  Is there a workaround for this.  In other words how do I make this script fire on each time a document link is clicked.
sherbug1015Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
This could be due to the fact that the a element click is not being stopped and the page is refreshing causing the post back not to work.

$(".FileCabinet a").click(function () {

Open in new window


Try this

$(".FileCabinet a").click(function (e) { 
  e.preventDefault();

Open in new window

1
sherbug1015Author Commented:
This does not help.  I read that the document ready function fires only once and if there is some kind of postback then the script won't rerun

Is there some alternative to the document ready function that will fire every time?

Thanks.
0
Julian HansenCommented:
I read that the document ready function fires only once
Correct
and if there is some kind of postback then the script won't rerun
Maybe you do not understand exactly how javascript events work.
The document.ready (windows load) event fires when the page has finished loading. Within your document.ready function you do your initialisation AND you setup your event handlers.

This code 
 $(".FileCabinet a").click(function () {

Open in new window

sets up an event handler - it does not run until the element it is bound to is triggered.

What this code does is bind the function to the click event handler for every instance of <a> within elements with class .FileCabinet.

This code will run EVERY time one of those <a> elements is clicked.

But you need to remember that an <a> element has a default behaviour which is to navigate to the link in the href attribute. If you don't override this behaviour then when your click event fires on the <a> it is going to result in the code partially running followed by a navigation to the href link - which is potentially going to break the code.

Hence the recommendation to put the e.preventDefault() into the event handler to prevent the default behavour from happening.


Is there some alternative to the document ready function that will fire every time?
This is a non-question. As discussed above the document ready is where you setup your event handlers which in turn fire each time the event they are bound to fires on the bound element.
0
Julian HansenCommented:
Here is sample that demonstrates the concept
The sample shows how document ready sets up the rest of the code for the page and how event handlers work to respond to events. It also shows how event handlers are bound to specific elements using selectors. 
<!doctype html>
<html>
<head>
<title>Test</title>
<link href="css/bootstrap.css" rel="stylesheet" />
<style type="text/css">
</style>
</head>
<body>
<div class="container">
  <h4>Demonstrate how event handlers relate to document ready</h4>
  <h5>Author: Julian Hansen</h5>
  <div class="clickme">
    <a href="#">Click Me</a>
  </div>
  <a href="#">Clicking me does nothing because I am not bound to an event handler</a>
  <div>
    <ul id="result">
  </div>
</div>

<script src="http://code.jquery.com/jquery.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.js"></script>
<script>
$(function() {
// IDENTICAL TO
// $(document).ready(function(){  

  alert('I will only display once - as part of the document ready function');
  // SET UP THE EVENT HANDLER
  $('.clickme a').click(function(e) {
    e.preventDefault();
    $('#result').append('<li>You clicked me</li>');
  });
  alert('exiting document ready');
});
</script>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.