Sujet : Souci sur un BIND ou LIVE..

Bonjour à tous..
Voici un bout de code où nous sommes un peu bloqué.
Le comportement est différent en fonction de l'emploi du bind et live.
Merci de votre aide.
S.

PS: NON, je ne passe pas en jQuery 1.7 !!!!

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Test</title>
    <script type="text/javascript" src="./js/jquery-1.6.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function()    {
        /*
            But à atteindre:
                - Pouvoir détecter un clic sur la colonne de gauche en faisant une recherche partant de #searchBtn, remonter vers le TABLE et retrouver tous les .eraseSearch
                - Compatible FF, et IE7+
        */
        /*TESTED WITH:
            $('.eraseSearch',$('input#searchBtn')    .closest('table'))
            $('.eraseSearch')
            $('input#searchBtn')    .closest('table')
                                    .find('.eraseSearch')
        */
/*        //IT WORKS (SELECTOR > LIVE || BIND)
        $('.eraseSearch')
                                .live('click',function(){
                                                                console.log('IT WORKS');
                                                        });
*/
/*        //IT WORKS (FIND > BIND)
        $('input#searchBtn')    .closest('table')
                                .find('.eraseSearch')
                                .bind('click',function(){
                                                                console.log('IT WORKS');
                                                        });
*/        
/*        //DOESN'T WORK (FIND > LIVE)
        $('input#searchBtn')    .closest('table')
                                .find('.eraseSearch')
                                .live('click',function(){
                                                                console.log('IT WORKS');
                                                        });
*/
/*        //IT WORKS (CONTEXT > BIND)
        $('.eraseSearch',$('input#searchBtn')    .closest('table'))
                                .bind('click',function(){
                                                                console.log('IT WORKS');
                                                        });
*/
        //DOESN'T WORK (CONTEXT > LIVE)
        $('.eraseSearch'
            //,$('input#searchBtn')    .closest('table')
            )
                                .live('click',function(){
                                                                console.log('IT WORKS');
                                                        });

    });
    </script>

    <style type="text/css">
    body {
        margin:0 !important;
        padding:0 !important;
        font-family: Arial,Helvetica,sans-serif !important;
        font-size: 12px;
    }
    </style>
</head>
<body>
<form name="search" id="search" method="post" action="" style="padding-left:5px">
<table border="0" cellspacing="0" cellpadding="1" style="border:2px solid #CF003C">
<tr>
    <td class="eraseSearch" width="100" style="border-bottom:1px solid #FFF">Contrat:</td>
    <td id="searchForm_Contrat">
        <label for="contrat_cdi">C.D.I</label><input type="checkbox" id="contrat_cdi" name="searchForm[contrat_cdi]"/>
        <label for="contrat_cdd">C.D.D</label><input type="checkbox" id="contrat_cdd" name="searchForm[contrat_cdd]"/>
        <label for="contrat_cdic">C.D.I.C</label><input type="checkbox" id="contrat_cdic" name="searchForm[contrat_cdic]"/>
        <label for="contrat_apprenti">Apprenti</label><input type="checkbox" id="contrat_apprenti" name="searchForm[contrat_apprenti]"/>
        <label for="contrat_contrat_qualif">Contrat Qualif</label><input type="checkbox" id="contrat_contrat_qualif" name="searchForm[contrat_contrat_qualif]"/>
    </td>
</tr>
<tr>
    <td colspan="2" style="background-color:#666666" align="right" height="30" valign="bottom"><input name="searchBtn" type="submit" id="searchBtn" value="Recherche"/></td>
</tr>
</table>
</form>
</body>
</html>

Re : Souci sur un BIND ou LIVE..

Pour les .live() qui fonctionnent pas, si tu cherche une alternative, essaye de regarder du coté de .delegate(), qui a le même effet mais avec une syntaxe différente. Je vais me pencher sur la question parce que la réponse m'interresse (j'ai lu a droite a gauche quelques souci avec les contextes et la fonction .live(), mais j'ai pas assez d'infos pour faire un retour précis. Je me documente smile

3 Dernière modification par Michel L'HUILLIER (25-01-2012 18:45:11)

Re : Souci sur un BIND ou LIVE..

Re : Souci sur un BIND ou LIVE..

Re : Souci sur un BIND ou LIVE..

Re : Souci sur un BIND ou LIVE..

J'ai cru comprendre que le .live avait quelques problèmes avec les context et les closest, je te retrouverais le post que j'avais trouvé à ce sujet (notamment sur le fait que le context devait pointer le DOM et non pas un élément jQuery pour qu'il fonctionne avec le .live()).

Dans tous les cas, tu as l'air d'avoir en main des solutions qui fonctionnent (bind), souhaites-tu absolument passer pas le live ?

Je fais également une aparté sur la migration en 1.7:
Je conçois complètement les nuits blanches en perspective, cela dit, une migration (upgrade de version par exemple) doit etre facturée. A toi de répondre à la seule question qui fait chier "Ca marche en 1.6, pourquoi migrer". Tu as plein de cartes en main, tu n'as qu'a choisir:
- Optimisation des ressources et en performances
- Gain en sécurité
- Evolutivité (toujours à jour = profiter des dernières technologies en matière de...)

N'hésite pas a utiliser des métaphores, c'est le meilleur vecteur que j'ai trouvé lors de mes rendez-vous clients: "Oui, les voitures au charbon existent, mais aujourd'hui, on à l'essence, et l’électrique, plus fiable, plus facile à faire réparer, plus économe. Aujourd'hui on peut rouler au charbon, mais c'est sale, c'est cher, c'est pas optimisé et surtout c'est voué a disparaitre, faites votre choix" smile