无法通过点击事件调用函数

Question

I have a car parts classified section, I want to display only 10 ads per page and pagination links at bottom. Every example of PHP pagination I see puts the php code into the same page where the data is displayed....I do not want to do this. I want everything to go through jquery and AJAX and use the XMLHttpRequest to push the data on page.

In my PHP script I put together the pagination links and each anchor has an attribute of "href='#'" and'linkValue' who's value is dynamically set to it's corresponding page number. The PHP generates this HTML:

<a class="paginateLink" linkvalue="2" href="#""></a>

For instance when clicking on link with 'linkValue=2' that value is passed to a jquery function and concatenated to the end of the query string:

'getParts.php?pageNum=2'. 

The PHP script gets the value of pageNum from the query string and uses it to determine which page is returned, in this example it would return records 11-20. The parts classified page is initially loaded by a function call to 'showParts()' in the head:

$(document).ready(showParts() );

which in turn calls the PHP script 'getParts.php'.

The problem is this: I cannot seem to call the 'showParts()' function from the click event from the pagination links. I can call a simple alert quite easily, I can even call a function which has the alert in it,but when trying to call the showParts function I just get the '#' at the end of the url addy and go to top of the page.

The jquery function:

$(document).ready(function(){
    $(".paginateLink").click(function(){
        showParts();
    });
});

At this point I'm not even trying to put the query string together, just want to get it so the function fires in the first place, even if it just sends back the same results.

EDIT: Not sure what I'm doing wrong here, this seems like it should work. For instance the following code works:

$(document).ready(function(){
    $(".paginateLink").click(function(){
        alert($(this).attr('linkValue'));
    });
});

So I CAN call a function and pass the necessary variable, I just can't call the showParts function, at least not a second time. Again the function is called when the page loads initially to populate the page with car parts.

function showParts(str) {
    if (str=="") {
        document.getElementById("partsDisplay").innerHTML="";
        return;
    }
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {  // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("partsDisplay").innerHTML=xmlhttp.responseText;
            $(document).foundation('accordion', 'reflow');
            $(document).foundation();
        }
    }
    xmlhttp.open("GET","PHP/getParts2.php",true);
    xmlhttp.send();
}

Answer 1

It looks like you change the pagination elements in dom, so click event is removed. So, you better use:

$(document).ready(function(){
    $("body").on("click", ".paginateLink", function(){
        showParts();
    });
});

This means, no matter if you remove the pagination, than insert it again, whenever you click the body and target is a navigation link it will trigger the event. If you use older jQuery, than live is equivalent method.

Another error spotted, you use:

if (str=="") {
   document.getElementById("partsDisplay").innerHTML="";
   return;
}

which is wrong, because later on you call the function without argument. It should be:

if (typeof str === "undefined" || !str) {
   document.getElementById("partsDisplay").innerHTML="";
   return;
}

But, since you use jQuery, wouldn't all be easier with:

$(document).ready(function(){
    $("body").on("click", ".paginateLink", function(e){
        e.preventDefault();
        $('#partsDisplay').load('PHP/getParts2.php?pageNum=' + $(this).attr('linkvalue'), function() {
            $(document).foundation('accordion', 'reflow');
        });
    });
});