Wicket中JQuery事件繫結失效的解決

snake_hand發表於2013-03-29
jQuery事件

這是第二次與Wicket的不期而遇了，雖然上次專案的時間很短，但是還是喜歡上這個Java的輕量級的系統框架。業務程式碼和前臺表示的完全分離這是我欣賞他的原因，把複雜的事情簡單化這一直是我所追求的做事方式，所以我和Wicket可以說是相見恨晚....O(∩_∩)O哈哈~

而JQuery則是個優秀的JS工具包，它替程式設計師完成了大量的重複工作，是一些複雜的而常用方法系統化、函式化。Wicket和JQuery的結合可謂是天作之合！


言歸正傳~~~~

Wicket和JQuery的結合是好事，但是兩者貌似有些不調好，這可能是實現機制的不同，這可能說的不正確，應該說對技術的瞭解不夠深入，你初次接觸會發現，通過JQuery繫結的控制元件事件會失效。

而我最終發現其原因在於我沒有遵循Wicket的框架的編碼原則，Wicket對於我這樣的程式設計師就給予了懲罰，你不遵守我就不理你...(⊙o⊙)…

Wicket：如果你要用JQuery一定要通知它，就是通過Wicket將繫結事件進行註冊，這樣你就可以後顧無憂的使用Jquery和javascript程式碼了...

 HTML程式碼

 1     <form wicket:id="frm" id="frm" >
 2         <Div wicket:id="divMsg" id="divMsg"></Div>
 3 
 4         <Label wicket:id="pageTitle" id="pageTitle">null</Label><br/><br/><br/>
 5         <select wicket:id="zList" id="zList" style="width:200px"></select><br/>
 6         input<br/><input type="text" wicket:id="inputTxt" id="inputTxt" style="width:200px"/><br/>
 7         <input type="checkbox" wicket:id="chk001" id="chk001" />Checkbox<br/>
 8         <input type="button" wicket:id="but001" value="Clear" id="but001" />
 9         <input type="button" wicket:id="but002" value="JQuery" id="but002" />
10         <input type="button" wicket:id="but003" value="MSG" id="but003" />
11         <br/>
12 
13 
14     </form>

 JS

function myclear(){
    //$("#inputTxt").attr("value","");
    $("#inputTxt").val("");
    $("#inputTxt").css({color:'#ff0011',background:'white'});
    $("#divMsg").html("");
    $("#chk001").attr("checked",false);
}

 

JAVA程式碼

 1 but001.add(new AjaxFormComponentUpdatingBehavior("onclick") {
 2     private static final long serialVersionUID = 1L;
 3 
 4     @Override
 5     protected void onUpdate(AjaxRequestTarget target) {
 6 
 7         target.appendJavaScript("myclear();");
 8         }
 9     });
10 _frm.add(but001);

相關文章