How to create a new div onclick using jQuery

Question

I'm working on a task I need to display Post Content-Img-Title on click without reload the page.

I've coded Below code:

// code for ajax portfolio
jQuery('span#ajax_post_abc a').click(function(){
    var portfolio_post_id= jQuery(this).attr('id');
    var ajaxurl = jQuery('#ajax-script-url').val();

    jQuery.ajax({
        type: 'POST',
        url: ajaxurl,        
        data: {
            "action": "load-filter2", 
            port_post_id: portfolio_post_id 
        },
        success: function(response) {
            jQuery(".aajax-post-content").html(response); }  
        });
    });

    //New Ajax portfolio div 
    jQuery('#ajax_post_abc').click(function() {
        jQuery(this).addClass('aajax-post-content');
    });

And the resultant response in will be displayed in aajax-post-content div. But the problem is if I have n posts and I click on n+1, n+2 and so on it does not shows the output. But if I click on the very first Post n0 then it will show the output as I need.

use append() instead of html .append()

BuDen
– BuDen

2013-09-16 13:38:55 +00:00
Commented Sep 16, 2013 at 13:38 — BuDen
– BuDen, Commented Sep 16, 2013 at 13:38

Arun · Accepted Answer · 2013-09-16 13:45:50Z

2

content.append('<div class="item"><span>' +data + '</span></div>');

answered Sep 16, 2013 at 13:45

Arun

2571 gold badge5 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arun Over a year ago

@vibz you can reffer this post http://stackoverflow.com/questions/16321748/jquery-add-new-div-onclick

Scription · Accepted Answer · 2013-09-16 13:43:02Z

0

Your code will only show the most recent change which happened.

If you want to see each change you must append the changes and use .append instead of .html

for example:

jQuery(".aajax-post-content").append(response);

answered Sep 16, 2013 at 13:43

Scription

6453 gold badges12 silver badges21 bronze badges

Comments

kinghfb · Accepted Answer · 2013-09-16 13:43:37Z

0

jQuery.html() replaces the inner html of the item. jQuery.append() adds a new element as a child to the specified container.

Sounds like you need append()

answered Sep 16, 2013 at 13:43

kinghfb

1,0215 silver badges14 bronze badges

Comments

sun · Accepted Answer · 2013-09-16 13:52:57Z

0

Try this

jQuery('span#ajax_post_abc a').click(function(){
    var portfolio_post_id= jQuery(this).attr('id');
    var ajaxurl = jQuery('#ajax-script-url').val();

    jQuery.ajax({
        type: 'POST',
        url: ajaxurl,        
        data: {
            "action": "load-filter2", 
            port_post_id: portfolio_post_id 
        },
        success: function(response) {
            jQuery(".aajax-post-content").html(response);
            jQuery(#ajax_post_abc).addClass('aajax-post-content');
             }  
        });
    });

answered Sep 16, 2013 at 13:52

sun

1,67811 gold badges29 silver badges48 bronze badges

Comments

avrahamcool · Accepted Answer · 2013-09-16 14:13:47Z

0

replace #content with any selector you want.

$('<div>new content</div>').appendTo($('#content'));

answered Sep 16, 2013 at 14:13

avrahamcool

14.1k5 gold badges49 silver badges59 bronze badges

Comments

Nandakumar · Accepted Answer · 2013-09-16 14:18:11Z

0

Use On method instead of Click function because when multiple clicks are to be included,it never works,So Change your code as

$(document).on( 'click','#ajax_post_abc', function (e) {
    jQuery(this).addClass('aajax-post-content');
});

Thank You Vibz...

answered Sep 16, 2013 at 14:18

Nandakumar

1,1012 gold badges11 silver badges30 bronze badges

Collectives™ on Stack Overflow

How to create a new div onclick using jQuery

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related