Question

我有一个表格，允许一个一个地添加最多6人（图1）。

＆＃34; ADD＆＃34;和＆＃34; +＆＃34;都添加用户并清除表单。这会将一段HTML附加到#worker-container，并通过display: none隐藏它。

这是代码的HTML部分。

<div id="team_box_btns">
    <div id="team_add_worker_icn">
        <span id="team_add_worker"><i class="fas fa-plus-circle fa-2x"></i></span>
    </div>
    <p class="form-text-header"><span id="team_add_worker_btn" title="add employee">ADD</span> MAX OF 6 USERS </p>
</div>
<div id="worker-container">
    <div id="team_worker" class="frame_worker">
        <div class="row">
            <div class="col-md-6">
                <label for="team_name" class="form-text-header">Name</label>
                <input id="team_name" name="team_name" type="text" class="form-control name" placeholder="" required>
            </div>
            <div class="col-md-6">
                <label for="team_s_name" class="form-text-header">Surname</label>
                <input id="team_s_name" name="team_s_name" type="text" class="form-control s_name" placeholder="" required>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <label for="team_tel" class="form-text-header">Phone</label>
                <input id="team_tel" name="team_tel" type="tel" class="form-control team" placeholder="" required>
            </div>
            <div class="col-md-6">
                <label for="team_mail" class="form-text-header">Email</label>
                <input id="team_mail" name="team_mail" type="mail" class="form-control mail" placeholder="" required>
            </div>
        </div>
    </div>
</div>

这是JS / jQ部分：

var addWorker = $('here goes the HTML from above').appendTo($('#worker-container'));
var addWorkerIcn = $('<span id="worker_' + worker_num + '_data"><i class="fa fa-user-circle fa-2x" aria-hidden="true" title="'+ name.value +' '+ s_name.value + '"></i></span>').appendTo($('#team_add_worker_icn'));

所以在追加之后看起来像这样：

我希望能够单击绿色右上角的用户图标以显示添加的用户的详细信息。我知道它与动态添加的元素有关，我需要使用冒泡让jQuery知道新元素。我可以使用动态添加的addWorkerIcn来执行此操作，并显示警报。

$（＆＃39; body＆＃39;）。on（＆＃39;点击＆＃39;，addWorkerIcn，function（）{ 警报（＆＃39;单击＆＃39;）; //在addWorker元素上设置display：block }）;

我的问题是，如何在点击其他附加元素后显示附加的addWorker元素？我希望它在点击图标后显示。我可以通过click事件触发它，但这不是我想要的。

Answer 1

不是将事件附加到新创建的元素，只需为创建的元素创建一个自定义类，并在页面加载时进行此绑定：

$("body").on('click', '.your-class', function(e){
    var $el = $(this);
})

这样您每次都不需要向主体添加点击事件，而是在{{1}内点击.your-class元素时触发单个事件。标签。

如何通过jQuery中的另一个附加元素访问附加元素

1 个答案: