jquery发生了一些非常奇怪的事情

时间:2012-07-11 09:13:25

标签: jquery wordpress

我对以下问题感到疯狂:

我有这个代码在花式滑动窗体上复制一些字段:

 (function($){

 $countCursos = 1;
 $countFormsA = 1;
 $countFormsB = 1;

      $.fn.addForms = function(idform){

                    var adicionar_curso = "<p>"+
                     "  <label for='nome_curso'>Nome do Curso</label>"+
                     "  <input id='nome_curso' name='nome_curso["+$countCursos+"]' type='text' />"+
                     "  </p>"+
                     "  <p>"+
                     "  <label for='instituicao'>Instituição</label>"+
                     "  <input id='instituicao' name='instituicao["+$countCursos+"]' type='text' />"+
                     "  </p>";

                     var myform2 = "<table>"+
                     "  <tr>"+
                     "     <td>Field C</td>"+
                     "     <td><input type='text' name='fieldc["+$countFormsA+"]'></td>"+
                     "     <td>Field D ("+$countFormsA+"):</td>"+
                     "     <td><textarea name='fieldd["+$countFormsA+"]'></textarea></td>"+
                     "     <td><button>remove</button></td>"+
                     "  </tr>"+
                     "</table>";

                      var myform3 = "<table>"+
                     "  <tr>"+
                     "     <td>Field C</td>"+
                     "     <td><input type='text' name='fieldc["+$countFormsB+"]'></td>"+
                     "     <td>Field D ("+$countFormsB+"):</td>"+
                     "     <td><textarea name='fieldd["+$countFormsB+"]'></textarea></td>"+
                     "     <td><button>remove</button></td>"+
                     "  </tr>"+
                     "</table>";


                    if(idform=='novo_curso'){
                        alert(idform);
                        adicionar_curso = $("<div>"+adicionar_curso+"</div>");
                        $("button", $(adicionar_curso)).click(function(){ $(this).parent().parent().remove(); });
                        $(this).append(adicionar_curso);
                        $countCursos++;
                    }


                        if(idform=='mybutton1'){
                        alert(idform);
                        myform2 = $("<div>"+myform2+"</div>");
                        $("button", $(myform2)).click(function(){ $(this).parent().parent().remove(); });
                        $(this).append(myform2);

                            $countFormsA++;

                        }

                    if(idform=='mybutton2'){
                        alert(idform);
                        myform3 = $("<div>"+myform3+"</div>");
                        $("button", $(myform3)).click(function(){ $(this).parent().parent().remove(); });
                        $(this).append(myform3);

                            $countFormsB++;

                        }





      };
})(jQuery);         

 $(function(){
    $("#mybutton1").bind("click", function(e){
    e.preventDefault();
    var idform=this.id;

        if($countFormsA<3){
            $("#container1").addForms(idform);
        }       
    });
});

$(function(){
    $("#novo_curso").bind("click", function(e){
    e.preventDefault();
    var idform=this.id;
    alert(idform);
        if($countCursos<3){
            $("#outro_curso").addForms(idform);
        }       
    });
});

$(function(){
    $("#mybutton2").bind("click", function(e){
    e.preventDefault();
    var idform=this.id;

        if($countFormsB<3){
            $("#container2").addForms(idform);
        }       
    });
});

它正在使用正确的HTML代码:

 <div id="content_form">
        <div id="wrapper_form">
            <div id="navigation_form" style="display:none;">
                <ul>
                    <li class="selected">
                        <a href="#">Dados Pessoais</a>
                    </li>
                    <li>
                        <a href="#">P. Académico</a>
                    </li>
                    <li>
                        <a href="#">P. Profissional</a>
                    </li>
                    <li>
                        <a href="#">Eventos</a>
                    </li>
                    <li>
                        <a href="#">Curriculum Vitae</a>
                    </li>
                    <li>
                        <a href="#">Confirmar</a>
                    </li>
                </ul>
            </div>

            <div id="steps">
                <form id="formElem" name="formElem" action="" method="post">
                    <fieldset class="step">

                        <legend>Dados Pessoais</legend>
                        <p>
                            <label for="nome">Nome</label>
                            <input id="nome" name="nome" />
                        </p>
                        <p>
                            <label for="morada">Morada</label>
                            <input id="morada" name="morada" />
                        </p>
                        <p>
                            <label for="localidade">Localidade</label>
                            <input id="localidade" name="localidade" />
                        </p>
                        <p>
                            <label for="codigo_postal">Código Postal</label>
                            <input id="codigo_postal" name="codigo_postal" placeholder="ex: 1111-111" />
                        </p>
                        <p>
                            <label for="num_bi">Nº BI/Cartão do Cidadão</label>
                            <input id="num_bi" name="num_bi" />
                        </p>
                        <p>
                            <label for="data_nascimento">Data de Nascimento</label>
                            <input id="data_nascimento" name="data_nascimento" placeholder="dia-mês-ano ex: 1-1-1975" />
                        </p>
                        <p>
                            <label for="telemovel">Telemóvel</label>
                            <input id="telemovel" name="telemovel" placeholder="ex: 911234567" />
                        </p>
                        <p>
                            <label for="tele_alternativo">Telefone Alternativo</label>
                            <input id="tele_alternativo" name="tele_alternativo" />
                        </p>
                        <p>
                            <label for="email">E-mail</label>
                            <input id="email" name="email" placeholder="ex: email@gmail.com"/>
                        </p>
                        <p>
                            <label for="email_alt">E-mail Alternativo</label>
                            <input id="email_alt" name="email_alt" />
                        </p>
                        <p>
                            <label for="info_adicional">Informação Adicional</label>
                            <textarea id="info_adicional" name="info_adicional" /></textarea>
                        </p>

                    </fieldset>
                    <fieldset class="step">
                        <legend>Percurso Académico</legend>
                        <p>
                            <label for="nome_curso">Nome do Curso</label>
                            <input id="nome_curso" name="nome_curso" type="text" />
                        </p>
                        <p>
                            <label for="instituicao">Instituição</label>
                            <input id="instituicao" name="instituicao" type="text" />
                        </p>
                        <p>
                            <label for="media_final">Classificação Final</label>
                            <input id="media_final" name="media_final" />
                        </p>
                        <p>
                            <label for="inicio_curso">Data Início Curso</label>
                            <input id="inicio_curso" name="inicio_curso" placeholder="dia-mês-ano ex: 1-1-1975" />
                        </p>
                        <p>
                            <label for="fim_curso">Data Fim Curso</label>
                            <input id="fim_curso" name="fim_curso" placeholder="dia-mês-ano ex: 1-1-1975" />
                        </p>
                        <div id="outro_curso">
                        </div>
                        <p>
                            <button id="novo_curso">Adicionar Outro Curso</button>
                        </p>

                    </fieldset>
                    <fieldset class="step">
                        <legend>P. Profissional</legend>
                        <p>
                            <label for="cardtype">Card</label>
                            <select id="cardtype" name="cardtype">
                                <option>Visa</option>
                                <option>Mastercard</option>
                                <option>American Express</option>
                            </select>
                        </p>
                        <p>
                            <label for="cardnumber">Card number</label>
                            <input id="cardnumber" name="cardnumber" type="number" AUTOCOMPLETE=OFF />
                        </p>
                        <p>
                            <label for="secure">Security code</label>
                            <input id="secure" name="secure" type="number" AUTOCOMPLETE=OFF />
                        </p>
                        <p>
                            <label for="namecard">Name on Card</label>
                            <input id="namecard" name="namecard" type="text" AUTOCOMPLETE=OFF />
                        </p>
                    </fieldset>
                    <fieldset class="step">
                        <legend>Eventos</legend>
                        <p>
                            <label for="newsletter">Newsletter</label>
                            <select id="newsletter" name="newsletter">
                                <option value="Daily" selected>Daily</option>
                                <option value="Weekly">Weekly</option>
                                <option value="Monthly">Monthly</option>
                                <option value="Never">Never</option>
                            </select>
                        </p>
                        <p>
                            <label for="updates">Updates</label>
                            <select id="updates" name="updates">
                                <option value="1" selected>Package 1</option>
                                <option value="2">Package 2</option>
                                <option value="0">Don't send updates</option>
                            </select>
                        </p>
                        <p>
                            <label for="tagname">Newsletter Tag</label>
                            <input id="tagname" name="tagname" type="text" AUTOCOMPLETE=OFF />
                        </p>
                    </fieldset>
                    <fieldset class="step">
                        <legend>Curriculum Vitae</legend>
                        <p>
                            <label for="newsletter">Newsletter</label>
                            <select id="newsletter" name="newsletter">
                                <option value="Daily" selected>Daily</option>
                                <option value="Weekly">Weekly</option>
                                <option value="Monthly">Monthly</option>
                                <option value="Never">Never</option>
                            </select>
                        </p>
                        <p>
                            <label for="updates">Updates</label>
                            <select id="updates" name="updates">
                                <option value="1" selected>Package 1</option>
                                <option value="2">Package 2</option>
                                <option value="0">Don't send updates</option>
                            </select>
                        </p>

                    </fieldset>
                    <fieldset class="step">
                        <legend>Confirmar</legend>
                        <p>
                            Everything in the form was correctly filled 
                            if all the steps have a green checkmark icon.
                            A red checkmark icon indicates that some field 
                            is missing or filled out with invalid data. In this
                            last step the user can confirm the submission of
                            the form.
                        </p>
                        <p class="submit">
                            <button id="registerButton" type="submit">Register</button>
                        </p>
                    </fieldset>
                </form>
            </div>

        </div>
    </div>
让我疯狂的是,我的wordpress网站上的相同代码(jquery和html)无效。当我点击这个按钮时:

    <div id="outro_curso"></div>
<p><button id="novo_curso">Adicionar Outro Curso</button></p>

他进入了jquery函数。我知道因为我们打印第一个(alert(idform);),但是第二个:

 if(idform=='novo_curso'){
                    alert(idform);
                    adicionar_curso = $("<div>"+adicionar_curso+"</div>");
                    $("button", $(adicionar_curso)).click(function(){ $(this).parent().parent().remove(); });
                    $(this).append(adicionar_curso);
                    $countCursos++;
                }
当我运行我的wordpress网站时,

永远不会出现在屏幕上。可能与某些事情发生冲突吗?

添加jquery.noConclict不起作用:

      var $j = jQuery.noConflict();

 (function($j){

     var countCursos = 1,
     var countFormsA = 1,
     var countFormsB = 1;

          $j.fn.addForms = function(idform){

                        var adicionar_curso = "<p>"+
                         "  <label for='nome_curso'>Nome do Curso</label>"+
                         "  <input id='nome_curso' name='nome_curso["+countCursos+"]' type='text' />"+
                         "  </p>"+
                         "  <p>"+
                         "  <label for='instituicao'>Instituição</label>"+
                         "  <input id='instituicao' name='instituicao["+countCursos+"]' type='text' />"+
                         "  </p>";

                         var myform2 = "<table>"+
                         "  <tr>"+
                         "     <td>Field C</td>"+
                         "     <td><input type='text' name='fieldc["+countFormsA+"]'></td>"+
                         "     <td>Field D ("+countFormsA+"):</td>"+
                         "     <td><textarea name='fieldd["+countFormsA+"]'></textarea></td>"+
                         "     <td><button>remove</button></td>"+
                         "  </tr>"+
                         "</table>";

                          var myform3 = "<table>"+
                         "  <tr>"+
                         "     <td>Field C</td>"+
                         "     <td><input type='text' name='fieldc["+countFormsB+"]'></td>"+
                         "     <td>Field D ("+countFormsB+"):</td>"+
                         "     <td><textarea name='fieldd["+countFormsB+"]'></textarea></td>"+
                         "     <td><button>remove</button></td>"+
                         "  </tr>"+
                         "</table>";


                        if(idform=='novo_curso'){
                            alert(idform);
                            adicionar_curso = $j("<div>"+adicionar_curso+"</div>");
                            $j("button", $j(adicionar_curso)).click(function(){ $j(this).parent().parent().remove(); });
                            $j(this).append(adicionar_curso);
                            countCursos++;
                        }


                            if(idform=='mybutton1'){
                            alert(idform);
                            myform2 = $j("<div>"+myform2+"</div>");
                            $j("button", $j(myform2)).click(function(){ $j(this).parent().parent().remove(); });
                            $j(this).append(myform2);

                                countFormsA++;

                            }

                        if(idform=='mybutton2'){
                            alert(idform);
                            myform3 = $j("<div>"+myform3+"</div>");
                            $j("button", $j(myform3)).click(function(){ $j(this).parent().parent().remove(); });
                            $j(this).append(myform3);

                                countFormsB++;

                            }





          };
    })(jQuery);         

     $j(function(){
        $j("#mybutton1").bind("click", function(e){
        e.preventDefault();
        var idform=this.id;

            if(countFormsA<3){
                $j("#container1").addForms(idform);
            }       
        });
    });

    $j(function(){
        $j("#novo_curso").bind("click", function(e){
        e.preventDefault();
        var idform=this.id;
        alert(idform);
            if(countCursos<3){
                $j("#outro_curso").addForms(idform);
            }       
        });
    });

    $j(function(){
        $j("#mybutton2").bind("click", function(e){
        e.preventDefault();
        var idform=this.id;

            if(countFormsB<3){
                $j("#container2").addForms(idform);
            }       
        });
    });

1 个答案:

答案 0 :(得分:0)

尝试使用jQuery.noConflict()

var $j = jQuery.noConflict();

$j("...").something();

有时wordpress会出现自定义jQuery函数的问题。


转换:

 $countCursos = 1;
 $countFormsA = 1;
 $countFormsB = 1;

为:

 var countCursos = 1,
     countFormsA = 1,
     countFormsB = 1;

以及对这些变量的所有相对调用。