Arquivos de sites

jQuery – O método live()

No capítulo anterior, nós usamos os métodos bind() e unbind() para anexar e desanexar manipuladores de eventos a vários elemento na página. Isso funciona bem para elementos dos quais ja existem, mas e se você  quiser que seu manipulador de evento seja anexado para elementos futuros também? Normalmente você teria que fazer isso manualmente, sobre a criação de novos elementos, e isso continuaria possível. Porém usando o método live(), você pode informar ao jQuery para anexar o seu manipulador de evento para qualquer elemento futuro que combine com o seu seletor original, sem precisar levantar um dedo. Deixe-me primeiro mostrar a você um exemplo onde nós usamos o método bind(), e então substituímos ele com o método live(), para mostrar a diferença:

<div id="divTestArea1">
        <a href="javascript:void(0);" onclick="AddBox();">Add box</a>
        <div class="test">This is a box</div>
</div>

<script type="text/javascript">
$(function()
{
        $(".test").bind("mouseover", function()
        {
                $(this).css("background-color", "blue");
        }).bind("mouseout", function()
        {
                $(this).css("background-color", "white");
        });
});

function AddBox()
{
        var div = $("<div></div>").addClass("test").text("Another box");
        $("#divTestArea1").append(div);
}
</script>

OK, esse exemplo pode parecer um pouco complicado, mas na verdade não é. Deixe me explica-lo. Nós temos um link, qual irá chamar o método javascript AddBox(), e então nós temos uma diz com a classe “test”. O método AddBox() simplesmente adicionar outra div na página. No evento read, nós selecionamos todos os elementos com a classe “test” e então nós vinculamos um manipulador para dois dos eventos: Os eventos mouseover e mouseout , quando nós mudamos a cor do elemento invocando o evento. Tente o exemplo no seu navegador. A primeira div terá o efeito mouseover, mas se você clicar no link para adicionar mais caixas, elas não terão o mesmo efeito. A razão é bastante óbvia: Nós anexaremos os eventos antes dessas novas caixas serem criadas.

Agora tente o seguinte exemplo em vez disso. Eu apenas modifiquei dias palavras nisso: As dias chamadas a bind() foram substituídas com chamadas a live():

<div id="divTestArea2">
        <a href="javascript:void(0);" onclick="AddBox();">Add box</a>
        <div class="test">This is a box</div>
</div>

<script type="text/javascript">
$(function()
{
        $(".test").live("mouseover", function()
        {
                $(this).css("background-color", "blue");
        }).live("mouseout", function()
        {
                $(this).css("background-color", "white");
        });
});

function AddBox()
{
        var div = $("<div></div>").addClass("test").text("Another box");
        $("#divTestArea2").append(div);
}
</script>

Agora se você puder rodar esse exemplo, você verá que mesmo você adicionando novos elementos após a página ser carregada, jQuery irá automaticamente anexar o manipulador de eventos a eles para você. O método live() funciona como o bind() em todos os outros aspectos, então cheque os capítulos anteriores para mais informações sobre isso. O mesmo funciona para o método die(), que funciona como o método unbind(), mas deve ser usado para casos onde o método live() foi usado.

Fonte: jquery-tutorial.net

Anúncios