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

如果您想知道当前代码无效的原因：

字符串以“＆lt;”以外的任何内容开头在jQuery 1.9中不被视为HTML字符串

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

因此，此代码可以正常工作（因为它以＆lt;开头）：

$( 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 />');
    });
});

Working Demo

添加多个用户jQuery

3 个答案: