Why is my javascript functions won't work when my html tags is from my php script

Question

I want to know why is that my javascript functions won't work if my html tag is from the php script??

Here's my jquery code:

$(function () {

//functions don't work

    $('ul li:gt(4)').hide();

    $('.prev').click(function() {
        var first = $('ul').children('li:visible:first');
        first.prevAll(':lt(5)').show();
        first.prev().nextAll().hide()
    });

    $('.next').click(function() {
        var last = $('ul').children('li:visible:last');
        last.nextAll(':lt(5)').show();
        last.next().prevAll().hide();
    });

//end of functions don't work

    $('.load').click(function() {
        $.ajax({
            url: 'load.php',
            success:function(data){
                $('#paging-container').html(data);
            }
        });
    });

});

Here's my html code:

<input class="load" type="button" value="Load">
<div id="paging-container">

</div>

And here's my php script:

 <?php  
    echo '<ul>';
    for($i=1;$i<=50;$i++){
        echo '<li>'.$i.'</li>';
    }
echo '</ul>
<a class="prev">prev</a> | <a class="next">next</a>';
?>

You need to use the .on function or the .live because your elements are added after your functions run — yoavmatchulsky
– yoavmatchulsky, Commented Oct 5, 2012 at 15:16

Community · Accepted Answer · 2017-05-23 12:27:54Z

For the type of jQuery you're using, the HTML tags must exist in your page already at the time you are running the initial jQuery. As it is, they do not exist and thus no event handlers are attached to them.

You have a couple choices to correct that:

You can use the dynamic form of event handlers with .on()
You can install the event handlers AFTER you add the objects to the page.

Using the dynamic form of .on() would look like this:

$("#paging-container").on('click', '.prev', function() {
    var first = $('ul').children('li:visible:first');
    first.prevAll(':lt(5)').show();
    first.prev().nextAll().hide()
});

$("#paging-container").on('click', '.next', function() {
    var last = $('ul').children('li:visible:last');
    last.nextAll(':lt(5)').show();
    last.next().prevAll().hide();
});

Here the event handler is actually attached to #paging-container and it uses delegated event handling to catch the events that happen on child objects. This will work even if child objects are added/removed after the event handler is installed as long as #paging-container itself is not destroyed.

See this post for a general description of how the dynamic flavor of .on() works.

user684934 · Accepted Answer · 2012-10-05 15:15:40Z

3

Your code to hide elements and bind .prev and .next runs on document load, not on ajax load. Stick that code in after the line in your success function:

$('.load').click(function() {
    $('#paging-container').html(data);
    $('ul li:gt(4)').hide();
    $('.prev').click(function() { ...

This way, they will bind on objects that are now in the DOM.

answered Oct 5, 2012 at 15:15

user684934

Comments

user1026361 · Accepted Answer · 2012-10-05 15:16:49Z

It's because you're assigning the event handlers before the php is loaded onto the screen. Try executing the functions that dont work in the success event of your jquery load statement ala:

$.ajax({
            url: 'load.php',
            success:function(data){
                $('#paging-container').html(data);
                $('ul li:gt(4)').hide();

                $('.prev').click(function() {
                var first = $('ul').children('li:visible:first');
                first.prevAll(':lt(5)').show();
                first.prev().nextAll().hide()
                });

                $('.next').click(function() {
               var last = $('ul').children('li:visible:last');
                last.nextAll(':lt(5)').show();
                last.next().prevAll().hide();
                });
            }
        });

Collectives™ on Stack Overflow

Why is my javascript functions won't work when my html tags is from my php script

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related