Question

我尝试使用http://jsfiddle.net/pixelentity/aABLD/24/创建Jquery动态，并创建了我的html文件。但它不起作用，这意味着它显示html页面，但单击添加按钮时不显示动态表单。这是我的代码

<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>

` 我的代码出了什么问题？有人可以帮忙解决这个问题吗？

Answer 1

只需将您的jQuery版本更改为更高版本，但不要使用1.9.1或更高版本，因为已删除了'live'方法。或者您可以使用jQuery 1.9将'live'方法更改为'on'方法。 1或更高。

Jquery动态表单不起作用

1 个答案: