Question

我有这样的代码，

<div class="panel-footer">
    <div class="post-activity">
        <i class="loading-icon"></i>
        <button onclick="ChangeColor(this);">Change Color</button>
    </div>
//Will be code
</div>

当我的项目工作时，我点击了触发元素，我编码改变了这样的状态，

<div class="panel-footer">
    <div class="post-activity">
        <i class="loading-icon"></i>
        <button onclick="ChangeColor(this);">Change Color</button>
    </div>
    <div class="comments-ch"></div>
</div>

我的功能是，

function ChangeColor(element)
{
    $(element).closest(".panel-footer").find(".comments-ch").css("background-color","#CC0000");
}

不工作。因为，<div class="comments-ch"></div>是实时/附加/新代码。

但如果我运行此代码，它就可以了

function ChangeColor(element)
 {
     $(element).closest(".panel-footer").find(".post-activity").css("background-color","#CC0000")
 }

在运行应用程序之前存在<div class="post-activity">...</div>代码。

如何联系附加/实时代码（.comments-ch）？感谢。

Answer 1

实时语法通常如下

$(".selector-class").live('event', function () {
     //do your logic here
}

事件部分可能是点击（元素点击），keyup，keydown等

干杯

Answer 2

我建议您在标记中删除onclick事件处理程序，至少这会使您的标记与javascript分开（有关详细信息，请参阅此discussion）。因此，您的更改按钮应如下所示：

<button id="btnChange">Change Color</button>

在javascript代码中（应该在DOM上执行）：

$("#btnChange").click(function() {
    ChangeColor(this);
});
function ChangeColor(element)
{
    $(element).closest(".panel-footer").find(".comments-ch").css("background-color","#CC0000");
}

您可以将两个功能合二为一，我保留它只是为了使代码中的变化尽可能少。这是工作demo。

Jquery Live Selector

2 个答案: