2013-05-10 51 views
1

我嘗試使用http://jsfiddle.net/pixelentity/aABLD/24/創建jquery動態表單,並創建了我的html文件。但它不起作用,這意味着它顯示HTML頁面,但點擊添加按鈕時不顯示動態表單。這是我的代碼jquery動態表單不起作用

<html> 

<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 

<script> 
jQuery(function($) { 

var multiTags = $("#multi"); 

function handler(e) { 
    var jqEl = $(e.currentTarget); 
    var tag = jqEl.parent(); 
    switch (jqEl.attr("data-action")) { 
    case "add": 
     tag.after(tag.clone().find("input").val("").end()); 
     break; 
    case "delete": 
     tag.remove(); 
     break; 
    } 
    return false; 
} 

function save(e) { 
    var tags = multiTags.find("input.tag").map(function() { 
     return $(this).val(); 
    }).get().join(','); 
    alert(tags); 
    return false; 
} 

multiTags.submit(save).find("a").live("click", handler); 
}); 
</script> 

<style type="text/css"> 

form { 
font-family: helvetica, arial, sans-serif; 
font-size: 11px; 
} 

form div{ 
margin-bottom:10px; 
} 

form a { 
font-size: 12px; 
padding: 4px 10px; 
border: 1px solid #444444; 
background: #555555; 
color:#f7f7f7; 
text-decoration:none; 
vertical-align: middle; 
} 

form a:hover{ 
    color:#ffffff; 
    background:#111111; 
} 

#multi label { 
    margin-left:20px; 
    margin-right:5px; 
    font-size:12px; 
    background:#f7f7f7; 
    padding: 4px 10px; 
    border:1px solid #cccccc; 
    vertical-align: middle; 
    } 

    #multi input[type="text"]{ 
    height:22px; 
    padding-left:10px; 
    padding-right:10px; 
    border:1px solid #cccccc; 
    vertical-align: middle; 
    } 

    #multi input[type="submit"]{ 
    margin-left:20px; 
    border:none; 
    background:#222222; 
    outline:none; 
    color:#ffffff; 
    padding: 4px 10px; 
    font-size:12px; 
    } 


    </style> 

    </head> 



    <body> 


    <form id="multi"> 
    <div> 
    <label>Tag</label><input class="tag" type="text" name="" type="text" /> 
    <a href="#" data-action="add">add</a> 
    <a href="#" data-action="delete">delete</a> 
    </div> 
    <input type="submit" value="save" > 
</form> 
    </body> 
    </html> 

` 我的代碼有什麼問題?有人可以幫助解決這個問題嗎?

+3

你必須更具體一點,預期的結果是什麼? – 2013-05-10 07:05:02

+0

點擊添加按鈕時,它應該添加新記錄,這意味着它重複。請看我的上面的網址和做演示,那麼你會得到更清晰的想法 – Lahiruzz 2013-05-10 07:09:31

+0

我試着在小提琴中的代碼,它工作正常,你的問題在哪裏? – jarvanJiang 2013-05-10 07:12:41

回答

0

只需將您的jQuery版本更改爲更高版本,但不要使用1.9.1或更高版本,因爲'live'方法已被刪除。或者您可以使用jQuery 1.9將'live'方法更改爲'on'方法.1或更高。

+0

謝謝兄弟。 :)現在它工作正常 – Lahiruzz 2013-05-10 08:44:13