javascript - 为什么我的 jQuery 没有在我创建的第二个 div 上添加显示？

Question

当我尝试添加第一个联系人并提交时，它显示在 div id=contact 中。

函数 hide/show 正在运行。

但是一旦我添加了第二个联系人，它就不再起作用了。

好像，jQuery没有进入显示...

function css(){
    $('.contacts').css('background-color', 'lightblue');
}

function visibility() {
    $("#vis").click(function(){
        $(".description").toggle();
        return false;
    });
};

$( document ).ready(function() {

    $("form").submit(function (event) {
        var fname = $('#fname').val();
        var lname = $('#lname').val();
        var desc = $('#desc').val();
        $('.contacts').append( "<div id='contact'>"+fname+"<br>"+lname+"<br><button id='vis'>Show/Hide</button><div class='description' style='display:;'>"+desc+"</div></div>");
        // alert(fname);
        event.preventDefault();
        css();
        visibility();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="get">
    <fieldset>
        <legend>Personal information:</legend>
        First name: <input type="text" name="fname" id="fname"><br>
        Last name: <input type="text" name="lname" id="lname"><br>
    </fieldset>
    <fieldset>
        <legend>Description:</legend>
        <textarea id="desc" value="desc"> </textarea><br>
        <input type="submit" value="Submit">
    </fieldset>
</form>

<div class="contacts"> </div>

如有任何帮助，我们将不胜感激。

Answer 1

正如我在评论中所写 - 在 html 中不能有多个具有相同 ID 的元素。您也不必为每个按钮添加监听器。您可以将主体和选择器的监听器添加为第二个参数(参见附加代码)。

function css(){
    $('.contacts').css('background-color', 'lightblue');
}

$( document ).ready(function() {
  //this way you don't need to add listener for each button
  $('body').on('click', '.vis', function() {
    $(this).closest('.contact').find('.description').toggle();
  });
  
  $("form").submit(function (event) {
    var fname = $('#fname').val();
    var lname = $('#lname').val();
    var desc = $('#desc').val();
    $('.contacts').append( "<div class='contact'>"+fname+"<br>"+lname+"<br><button class='vis'>Show/Hide</button><div class='description'>"+desc+"</div></div>");
    event.preventDefault();
    css();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="get">
    <fieldset>
        <legend>Personal information:</legend>
        First name: <input type="text" name="fname" id="fname"><br>
        Last name: <input type="text" name="lname" id="lname"><br>
    </fieldset>
    <fieldset>
        <legend>Description:</legend>
        <textarea id="desc" value="desc"> </textarea><br>
        <input type="submit" value="Submit">
    </fieldset>
</form>

<div class="contacts"> </div>