2013-05-10 3 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

더 구체적으로 예상되는 결과는 무엇입니까? –

+0

추가 단추를 클릭하면 복제라는 의미의 새 레코드가 추가됩니다. 위의 URL을보고 데모를 해보면 더 명확한 아이디어를 얻을 수 있습니다. – Lahiruzz

+0

나는 당신의 코드를 피들로 시도해보고 문제가 없는가? – jarvanJiang

답변

0

jQuery 버전을 상위 버전으로 변경하지만 1.9.1 이상은 '라이브'메소드가 제거되었으므로 사용하지 마십시오. 또는 jQuery 1.9를 사용하여 '라이브'메소드를 'on'메소드로 변경할 수 있습니다. .1 이상.

+0

고마워. :) 이제 잘 작동합니다. – Lahiruzz

관련 문제