Question

使用动态生成的HTML来格式化传输源中的数据，我将元素推送到前端，如下所示：

items.push("<div id='dock" + key +"' class='cycles pop-up'><ul><li><h3><span>" + road + "</span></h3></li><li><p>" + bikeTotal + "</p><p>Cycles available</p></li><li><p>" + spacesAvailable + "</p><p>Empty docking spaces</p></li></ul></div>");

然后，当我尝试使用JQuery获取<h3>的宽度时，它返回null。

var availableWidth = $('.pop-up ul li h3').on('load', function(){
        console.log($(this).width());
    });

任何人都可以解释我哪里出错了吗？

编辑：

用于附加到正文的代码：

$( "<div/>", {
    "class": "cycle-list",
    html: items.join( "" )
}).appendTo( "body" );

Answer 1

尝试

$(function () {
  $('.pop-up ul li h3').each(function () { console.log($(this).width()); });
});

假设有以下标记。

<div>
  <ul>
    <li>
      <h3></h3>
    </li>
  </ul>
</div>

Answer 2

load没有<h3>个事件。通常，您应该能够使用

获取集合中第一个宽度

console.log($('.pop-up ul li h3').width());

但是，当AJAX调用完成时，会追加这些项目。这意味着当您尝试记录宽度时它们不存在。如果你在AJAX回调函数中放置该行，在追加它们之后，你将得到你想要的结果：

$.getJSON("cycles.php", function(data, index) {

    //the rest of your code

    $( "<div/>", {
        "class": "cycle-list",
        html: items.join( "" )
    }).appendTo( "body" );

    console.log($('.pop-up ul li h3').width());
});

使用JQuery获取动态生成的HTML的宽度

2 个答案: