jQuery .css（）不适用于新创建的CSS类

Question

我觉得这可能是由于基本的误解，但我不能为我的生活让这个工作。

我在视图中有一个项目列表，我希望能够勾选一个复选框来更改视图的显示方式。这与我的代码完美配合，除非您使用我的JSON代码移动到“第2页”（没有页面重新加载）。

“页面2”上新创建的元素忽略了我的代码，即使我的复选框仍然勾选。

这是我的复选框代码：

function smallCards(){


if (jQuery('input.smallcheck').is(':checked')) {

    jQuery("#card-list").css("display", "inline-grid"); 
    jQuery("#card-list").css("width", "500px"); 
    jQuery(".card-info").css("display", "contents");
    jQuery("figure").css("float", "left");

   //jQuery(".votes").css("font-size", "10px"); 
   //jQuery("#card-list img").css("height", "138"); 
   //jQuery("#card-list img").css("width", "97"); 


  }

}

前两个工作#card-list但.card-info和figure似乎不适用于新创建的“第2页”元素。

然后有Jquery代码运行JSON回调以生成页面上的每个项目（包括所有页面的分页）。

这是代码的一小部分示例：

    jQuery.getJSON('https://www.example.com/getlist.php?sortby='+sortby+'&attrib='+attrib+'&ban='+ban+'&cardset='+cardset+'&type='+type+'&name='+name+'&level='+level+'&race='+race+'&page='+pgno+'&callback=?',
        function (data) {
            host = "https://www.example.com/pics/";

            jQuery.each(data, function (i, val) {

htmlst += '<div id="container"><figure><a data-name="' + val.name + '" onClick="mainsearch(' + val.id + ')" href="javascript:void(0)"><img src="' + host + val.id + '.jpg"></a><figcaption style="line-height:4px;"><div id="votes" class="votes"><i class="fa fa-search fa-lg" aria-hidden="true" title="Times Searched" alt="Times Searched" style="color: #0d0d0d;"></i> '+ReplaceNumberWithCommas(val.times)+'</a>&nbsp;&nbsp;<a href="javascript:void(0);" id="u'+val.id+'" onclick="voteuplist(this)"><i class="fa fa-arrow-up fa-lg" aria-hidden="true" title="Upvote" alt="Upvote" style="color: #FF8b60;"></i> '+val.rating_up+'</a>&nbsp;&nbsp;<a href="javascript:void(0);" id="d'+val.id+'" onclick="votedownlist(this)" style="color: #9494FF;"><i class="fa fa-arrow-down fa-lg" aria-hidden="true" title="Downvote" alt="Downvote" style="color: #9494FF;"></i> '+val.rating_down+'</a></div></figcaption></figure>  <div class="card-info"><div class="card-name">'+val.name+'</div><div class="card-desc"></div></div></div>';

当我生成第二个页面（使用上面的JSON函数）时，它将忽略我的复选框设置。即使我在上述函数结束时运行smallCards()。

很抱歉缺乏细节。这是我作为一项服务建立的年龄，我一直在努力提高它自己几个月。

Answer 1

我相信你正在做一个ajax请求所以你需要在ajax完成后再次调用css

 jQuery.getJSON('https://www.example.com/getlist.php?sortby='+sortby+'&attrib='+attrib+'&ban='+ban+'&cardset='+cardset+'&type='+type+'&name='+name+'&level='+level+'&race='+race+'&page='+pgno+'&callback=?',
    function (data) {

//...
if (jQuery('input.smallcheck').is(':checked')) {

    jQuery("#card-list").css("display", "inline-grid");  //Default has no display set
    jQuery("#card-list").css("width", "500px");          //Default has no width set
    jQuery(".card-info").css("display", "contents");     //Default is Display:None 
    jQuery("figure").css("float", "left");               //Default is no float
  }
}});