Question

我正在处理一项任务，我需要在点击后显示Post Content-Img-Title而不重新加载页面。

我编码了以下代码：

// 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');
    });

结果响应将显示在aajax-post-content div中。但问题是如果我有n个帖子，我点击n+1，n+2等等，它就不会显示输出。但是，如果我点击第一个帖子n0，那么它将显示我需要的输出。

Answer 1

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

Answer 2

您的代码只会显示最近发生的更改。

如果您想查看每个更改，您必须附加更改并使用.append而不是.html

例如：

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

Answer 3

jQuery.html（）替换项目的内部html。 jQuery.append（）将一个新元素作为子元素添加到指定的容器中。

听起来你需要追加（）

Answer 4

试试这个

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');
             }  
        });
    });

Answer 5

将#content替换为您想要的任何选择器。

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

Answer 6

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');
});

谢谢Vibz ......

如何使用jQuery创建一个新的div onclick

6 个答案: