jQuery使整个div可在ajax内容上点击

Question

I've got a Wordpress website and posts are loading dynamically. I've added this to the php file for single post :

HTML

<article>
    <div class="blog-item-holder">
        <div class="featured-image">
            <a href></a>
        </div> Conent
    </div>
</article>

JS

jQuery(document).ready(function() {
      $(".blog-item-holder").click(function(){
        window.location=$(this).find("a:first").attr("href"); 
        return false;
});
$(".blog-item-holder").css( "cursor", "pointer" );

but after the content has loaded dynamically, next posts are without this script. Is it a good idea to use jQuery .on() ? How this code should look like in order to work?

Answer 1

Working with on is a good idea. Something like this:

jQuery(document).ready(function() {

    $(document).on("click", ".blog-item-holder", function(){
        window.location=$(this).find("a:first").attr("href"); 
        return false;
    });

    $(".blog-item-holder").css( "cursor", "pointer" );

});

This only works if window.location is not refreshing the page.

Answer 2

Use JQuery .on()

$(".blog-item-holder").on("click", function(){
        window.location=$(this).find("a:first").attr("href"); 
        return false;
});