文章/答案/技术大牛

发布

社区首页 >问答首页 >单击以使用jquery或javascripts打开新段

问单击以使用jquery或javascripts打开新段
EN

Stack Overflow用户

提问于 2013-05-13 16:14:06

回答 1查看 267关注 0票数 0

下面是我现在拥有的Live示例：https://dl.dropboxusercontent.com/u/11126587/input%20Tag%20Creation/tag.html

我想要的是，如果我单击"+ Add另一个片段“文本，它将创建相同的输入框，具有与现在相同的标记效果(您可以编写一些东西，然后按Enter键查看标记效果)。

<html>
<head>
<meta charset="utf-8">
<title>
Input Tag
</title>
<link rel="StyleSheet" href="css/jquery.tagedit.css" type="text/css" media="all"/>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.autoGrowInput.js"></script>
<script type="text/javascript" src="js/jquery.tagedit.js"></script>
<script type="text/javascript">
$(function() {  
    // Empty List
    $( '#empty-list input.tag' ).tagedit({
        autocompleteURL: 'server/autocomplete.php'
    });

    // Edit only
    $( '#brackets input.tag').tagedit({
        autocompleteURL: 'server/autocomplete.php'
    });

    // Arrow List
    $( '#arrow input.tag' ).tagedit({
        autocompleteURL: 'server/autocomplete.php',
        autocompleteOptions: {minLength: 0}
    });

    // Custom Break Characters
    $('#custom-break input.tag').tagedit({
        autocompleteURL: 'server/autocomplete.php',
        // return, comma, space, period, semicolon
        breakKeyCodes: [ 13, 44, 32, 46, 59 ]
    });

    // Local Source
    var localJSON = [
        { "id": "1", "label": "Hazel Grouse", "value": "Hazel Grouse" },
        { "id": "2", "label": "Common Quail",   "value": "Common Quail" },
        { "id": "3", "label": "Greylag Goose", "value": "Greylag Goose" }
    ];              
    $('#local-source input.tag').tagedit({
        autocompleteOptions: {
            source: localJSON
        }
    });
    $('#local-source2 input.tag').tagedit({
        autocompleteOptions: {
            source: localJSON
        }
    });
    $('#local-source3 input.tag').tagedit({
        autocompleteOptions: {
            source: localJSON
        }
    });

    // Function Source
    $('#function-source input.tag').tagedit({
        autocompleteOptions: {
            source: function(request, response){
                var data = [
                    { "id": "1", "label": "Hazel Grouse", "value": "Hazel Grouse" },
                    { "id": "2", "label": "Common Quail",   "value": "Common Quail" },
                    { "id": "3", "label": "Greylag Goose", "value": "Greylag Goose" },
                    { "id": "4", "label": "Merlin", "value": "Merlin" },
                ];              
                return response($.ui.autocomplete.filter(data, request.term) );
            }
        }
    }); 
});
</script>
</head>

<body>
<p id="local-source" style="padding:0px; margin:0px;">
        <input type="text" name="tag[]" value="" class="tag"/>
</p>

           + Add Another Segment

我从某个人的博客中发现了这个标记效应，但是我想用Click来扩展它以创建新段。另外，我不习惯使用js，所以我给出了从我的投递箱中的例子链接。

如果有人能做到的话，那就太好了。如果我的发帖格式有什么问题，请告诉我，如果我可以帮助您张贴或提供更多的信息。

提前感谢

jquery

html

css

javascript

回答 1

Stack Overflow用户

发布于 2013-05-13 16:24:56

就像这样？？

<p id="local-source">
    <input type="text" class="tag"/>
</p>
<div id="add">
    + Add Another Segment
</div>

$(document).ready(function() {
   $('#add').on('click', function() {
      var input = '<input type="text" class="tag"/>';
       $(input).appendTo($('#local-source'));
   });
});

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/16526626

复制

相似问题

问单击以使用jquery或javascripts打开新段
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单击以使用jquery或javascripts打开新段EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单击以使用jquery或javascripts打开新段
EN