jquery - jQuery .css()不适用于新创建的CSS类

我觉得这可能是由于基本的误解造成的，但是我无法一辈子让它起作用。

我在视图中有一个项目列表，我希望能够勾选一个复选框以更改视图的显示方式。这与我拥有的代码完美配合，除了当您使用我的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页”元素。

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

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

    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()。

抱歉，缺少细节。这对我来说是一种服务，已经建立了很长一段时间，并且我自己几个月以来一直在尝试对其进行增强。

最佳答案

我相信您正在执行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
  }
}});