添加多个用户jQuery

Question

我想在jQuery中添加多个用户。 我有以下代码，但它不起作用。 有人知道为什么吗？

谢谢！

    <script type="text/javascript">

$( document ).ready(function() {
  $('#add').click(function(){
        var newuser = $.html('Gebruiker: <input type="text" name="user[]"><br />');

        $(newuser).appendTo('#users');
    });
});


</script>
<section>
<span id="add">Nieuwe gebruiker</span><br /><br /><br />
<form action="" method="" id="users">

<input type="submit" name="send" value="verzenden">
</form>

Answer 1

在变量中使用简单的字符串，不需要jQuery .html()函数。 然后将.appendTo()函数更改为.append()并在jQuery选择器中定义元素。

$( document ).ready(function() {
    $('#add').click(function(){
        var newuser = 'Gebruiker: <input type="text" name="user[]"><br />';
        $('#users').append(newuser);
    });
});

Answer 2

如果您想知道为什么您当前的代码不起作用：

以“<”开头的字符串不被视为jQuery 1.9中的HTML字符串

http://stage.jquery.com/upgrade-guide/1.9/#jquery-htmlstring-versus-jquery-selectorstring

因此，此代码将正常工作（因为它以<开头）：

$( document ).ready(function() {
  $('#add').click(function(){
        $('<input type="text" name="user[]">').appendTo('#users');
    });
});

要使用当前的代码，请使用$ .parseHTML ：

$( document ).ready(function() {
  $('#add').click(function(){
        var newuser = $.parseHTML('Gebruiker: <input type="text" name="user[]"><br />');

        $(newuser).appendTo('#users');
    });
});

$ .parseHTML用于解析任意HTML，以便jQuery不将其作为选择器。

编辑：添加删除功能：

$( document ).ready(function() {
    $('#add').click(function(){
        var newuser = $.parseHTML('<div><label>Gebruiker:</label> <input type="text" name="user[]"><span class="delete">Verwijderen</span></div>');
        $(newuser).appendTo('#users');
    });
    $(document).on('click','.delete', function(){ 
          $(this).parent('div').remove(); 
          console.log('reached'); 
    }); 
});

jsFiddle示例： http ： //jsfiddle.net/RtTpN/

Answer 3

是的，jQuery中没有任何名为$.html()的东西。 html是一组节点的方法。

你可以这样做：

$(document).ready(function () {
    $('#add').click(function () {
        $('#users').append('Gebruiker: <input type="text" name="user[]"><br />');
    });
});

工作演示