🚀 go-pugleaf

W dniu 2014-07-04 17:59, jivanmukta@poczta.onet.pl pisze:
> Uczę się JavaScriptu. Mam takie pytanie z jQuery:
> na czym polega przewaga użycia $('input:button').bind('click', function () {...}) nad onclick="myFunction();" ? Tzn. czy w nietrywialnych aplikacjach WWW powinno się tak obsługiwać zdarzenia?
>
Przewaga jest chociażby taka, że używając jQuery dodajesz jedną linijkę
i masz obsługe wszystkich inputów typu button, w podejściu onclick -
musisz ręcznie/z automatu dopisywać to do wszystkich wymaganych inputów.
Jeśli dopiero zaczynasz bawić się w html'u i javascripcie - to staraj
się nie duplikować kodu. 10 inputów z onclickiem gorzej jest edytować
niż jedną linijke z jQuery.

W dniu 05.07.2014 09:43, axel pisze:
>> na czym polega przewaga użycia $('input:button').bind('click',
>> function () {...}) nad onclick="myFunction();" ? Tzn. czy w
>> nietrywialnych aplikacjach WWW powinno się tak obsługiwać zdarzenia?
>>
> Przewaga jest chociażby taka, że używając jQuery dodajesz jedną linijkę
> i masz obsługe wszystkich inputów typu button, w podejściu onclick -
> musisz ręcznie/z automatu dopisywać to do wszystkich wymaganych inputów.
> Jeśli dopiero zaczynasz bawić się w html'u i javascripcie - to staraj
> się nie duplikować kodu. 10 inputów z onclickiem gorzej jest edytować
> niż jedną linijke z jQuery.

Pozwala też to odseparować kod js od htmla, co zwiększa czytelność kodu.

1. ktoś może nadpisać Twoje zdarzenie w innej części kodu
2. w związku z powyższym, przy pomocy bind możesz dodać więcej funkcji nasłuchujących
3. events bubble - możesz podpiąć jedno zdarzenie w obiekcie rodzica i obsłużyć w ten sposób np. 1000 elementów - kwestia wydajności, patrz też pkt. 5
4. kod javascript umieszczamy w plikach .js a kod css w plikach .css (są odstępstwa od tej reguły ale to już inne kwestie). Czyli nie robi się <a onclick="..."> <a style="..."> 
5. "bind" jest przestarzały, używaj "on" a w necie poczytaj o bąbelkowaniu zdarzeń (events bubble)

Napisałem tak (w head script):

        $(document).ready(function () {
            showPropertyRows(); 
            showAnnouncementRows();
            animateSlides(<?php echo $numSlides; ?>);
            animateButton('submit_announcement');
            animateMainTitle();
            animateIntro('to_read');
            $('#announcement').submit(submitAnnouncement);
            $('#property_estate_type_id').change(showPropertyRows);
            $('#property_estate_type_id').keyup(showPropertyRows);
            $('#property_estate_type_id').keydown(showPropertyRows);
            $('#offer_type_id').change(showAnnouncementRows);
            $('#offer_type_id').keyup(showAnnouncementRows);
            $('#offer_type_id').keydown(showAnnouncementRows);
            $('#property_remarks').keyup(function(){ return maxLengthOfArea(document.getElementById('property_remarks'), document.getElementById('property_remarks_left')); });
            $('#change_to').keyup(function(){ return maxLengthOfArea(document.getElementById('change_to'), document.getElementById('change_to_left')); });
            $('#remarks').keyup(function(){ return maxLengthOfArea(document.getElementById('remarks'), document.getElementById('remarks_left')); });
            $("#announcement").validate();
        });

Funkcje show... i animate... oraz validate działają mi poprawnie. Nie działa jednak wiązanie handlerów ze zdarzeniami. Próbowałem też on i bind. Nie działa.
Co robię źle?

Przepraszam, zapomniałem, że CodeIgniter generuje <select name=...> a nie <select id=...>. Zmieniłem w kodzie selektory $('#...') na $('select[name=...]') i teraz już wszystko działa.
Problem zamknięty.