Pobieranie selectora na rzecz którego wywołujemy metodę on() przy wykorzystaniu selectora dziecka

Dzisiaj odkryłem małą ciekawostkę dotyczącą funkcji on() w jQuery. Otóż rozważmy następujący kod:

<div class="container">
    <a href="#" class="click_element">CLICK</a><br/>
</div>
$("div.container").on("click", "a.click_element", function (event) {
    $(event.delegateTarget).append("delegateTarget dodaje tekst...<br/>");
    $(this).closest('div.container').append("Potem metoda closest()<br/>");
    $(this).parents('div.container').append("Można też przy pomocy parents().parent()<br/>");
    return false;
});

Okazuje się, że najlepiej korzystać z parametru eventu event.delegateTarget – jest to dokładnie funkcjonalność do której został stworzony. Jeśli dobrze to zrozumiałem, to przekazujemy w ten sposób selektor przy każdym wywołaniu tej przypiętej funkcji, czyli nic to nie kosztuje. Jednak przy bardziej skomplikowanych i zagnieżdżonych układach HTML’u metody closest() i parents() mogą zająć więcej czasu wykonania.

Link do fiddle’a: http://jsfiddle.net/HV8NS/.

Widget tabs – usuwanie zawartości taba przy przełączaniu

Korzystałem z jQueryUI tabs do ładowania contentu  przez ajax i próbowałem uzyskać efekt kółeczka które się ładuje podczas faktycznego ładowania zapytania. Kółeczko = loading

Problem w tym, że domyślnie widget tabs nie obsługuje takiej funkcjonalności.

Rozwiązanie:


<div class="tabs">
    <div>
        <ul>
            <li><a href="ajax1.php">Tab 1</a></li>
            <li><a href="ajax2.php">Tab 2</a></li>
        </ul>
    </div>
    <div class="loading" style="text-align: center;">
        <img src="images/loading.gif">
    </div>
</div>

 


$(".tabs").tabs({
    ajaxOptions: {
        cache: false
    },
    load: function() {
        $(".loading").hide();
    },
    beforeLoad: function(event, ui) {
        $(".loading").show();
        $(ui.panel).siblings('.ui-tabs-panel').empty();
    }
});

Najważniejsza część to $(ui.panel).siblings('.ui-tabs-panel').empty();. Ten kawałek powoduje, że przed załadowaniem treści przy pomocy ajax treść wszystkich tabów jest wyzerowana.

Do ściągnięcia działający przykład: tabs.rar

Start bloga

Witam Cię przypadkowy przybyszu :-)

Blog nie został założony pod „publikę”, więc raczej nie spodziewaj się cudów w wyglądzie czy jakiegoś ścisłego contentu. Celem bloga jest bardziej prowadzenie dziennika ciekawostek programistycznych czy technik które mogą mi się kiedyś jeszcze przydać. Jeśli ktoś na tym skorzysta - fine with me.

A więc do pracy!