1

在我的应用程序中，我正在应用一些 CSS onload，然后使用 Jquery 附加一些 html！我的问题是 CSS 没有应用于新添加的元素。我如何确保将 CSS 应用于新附加的 html？

请看一下 jsfiddle

HTML：

<body onload="loaded()">
<div id="a">
    <div class="main">a</div>
    <div class="main">b</div>
    <div class="main">c</div>
    <div class="main">d</div>
</div>
<input type="button" value="click Me" onclick="clickMe()" />
</body>

JAVASCRIPT：

function loaded() {
    var posts = $('.main'),
    postCount = posts.length,
    postHalf = Math.round(postCount / 2),
    wrapHTML = '<div class="tab"></div>';
    posts.slice(0, postHalf).wrapAll(wrapHTML);
    posts.slice(postHalf, postCount).wrapAll(wrapHTML);
}

function clickMe() {
  $("#a").append("<div class='main'>e</div>");
}

CSS：

.tab {
    width: 10%;
    border: 1px solid black;
    float: left;
}
4

1 回答 1

1

您新添加的元素具有 class .main，并且在 css 中具有.tab，因此显然不会将 css 应用于您的新元素。

如果我正确理解您想要实现的目标，我会说您需要在添加新元素后重新运行 loaded() 函数。所以新的 div 被包裹在.tabdiv 中，就像它发生在现有元素的 onload 中一样。

但是你需要在调用loaded()函数之前解包元素，否则会发生一些奇怪的事情。像这样：

function loaded() {
    var posts = $('.main'),
        postCount = posts.length,
        postHalf = Math.round(postCount / 2),
        wrapHTML = '<div class="tab"></div>';
    posts.slice(0, postHalf).wrapAll(wrapHTML);
    posts.slice(postHalf, postCount).wrapAll(wrapHTML);
}

function clickMe() {
  $('.main').unwrap();
  $("#a").append("<div class='main'>e</div>");
  loaded();
}

这应该可以正常工作：http: //jsfiddle.net/MfSga/6/

此外，不要在 html 中使用 onload onclick。在 js 文件中执行。

于 2013-10-06T23:57:29.127 回答