Question

Why does the JQuery script I use in all my pages seems to only works before beginning to browse my tabs if the content of my tabs is the same everywhere ?

I have a tab view web page built with JQuery and AJAX.

This is my JQuery functions:

$(document).ready(function(){
    $(".box .more").click(function(event){
        alert('test'); 
    });

    $("a.linkTab").click(function(event){
        var tabID = $('.linkTab')[0].toString().split('#')[1];
        $.ajax({
            url : "loadPage.php?tabID=" + tabID,
            success : function (data) {
                $('#body').html(data);
            }
        });
    });
});

This is my body web page:

<div id="header">...</div>
<div id="body">
    <div class="box">
        <p class="more">LinkLike</p>
    </div>
</div>
<div id="footer"><a href="#9">9</a></div>

loadPage.php only include needed page that Ajax script sent.

My tab system works perfectly, I can navigate in the page I want. Before navigating, When I click on the LinkLike, the alert appears. But, when I browse tabs, When I click, there is nothing.

Why does the JQuery script seems to only works before beginning to browse.

Important, the file I imports from php contains exactly the same body than the first one. The file contains:

<div class="box">
    <p class="more">LinkLike</p>
</div>

Answer 1

try

$(document).delegate(".box .more","click",function(event){
        alert('test'); 
    });

the reason probably is you can generating the link dynamically, and event handlers do not attach themselves to the dynamically inserted elements to the DOM. Previously .live was used but that now is deprecated, if you are using jquery version 1.7+ you can use the .on method or else you can use the delegate method to attach the event handler to the dynamic content. However you can also re-bind the events in the success callback of ajax request

$.ajax({
            url : "loadPage.php?tabID=" + tabID,
            success : function (data) {
                $('#body').html(data);
                $(".box").bind("click");
            }
        });

jQuery.on version1.7+

jQuery.delegate