Jquery Live Selector

时间:2014-08-31 20:00:04

标签: jquery html

我有这样的代码,

<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)?感谢。

2 个答案:

答案 0 :(得分:0)

实时语法通常如下

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

事件部分可能是点击(元素点击),keyup,keydown等

干杯

答案 1 :(得分:0)

我建议您在标记中删除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