javascript - 如何让JS在JS生成的帖子中工作？

Question

我的JS零基础。我连JS的A、B、C都不懂。我正在制作一份表格。我必须向用户提供一种设施，让他可以添加多个联系号码。这是我的 HTML。

<li>
    <div id="contact-number-wrapper">
        <div class="contact-number">
            <div class="field-del">
                <a href="#" class="field-del-button"></a>
            </div>
            <!--end of field del-->
            <div class="field-title">
                <select name="country">
                    <option value="contact-number" selected>Contact Number</option>
                    <option value="office-number">Office Number</option>
                    <option value="house-number">House Number</option>
                    <option value="mobile-number">Mobile Number</option>
                </select>
            </div>
            <!--end of field title-->
            <div class="field-input">
                <input autocomplete="off" class="input" id="contact-text-field" name="contact-text-field" type="text" value="+92 333 8141255" placeholder="" />
            </div>
            <!--end of field input-->
            <div class="field-privacy">
                <dl id="sample4" class="dropdown"> <dt><a href="#"></a></dt>
                    <dd>
                        <ul>
                            <li><a href="#">Public</a></li>
                            <li><a href="#">Friends</a></li>
                            <li><a href="#">Only me</a></li>
                            <li><a href="#">Custom</a></li>
                        </ul>
                    </dd>
                </dl>
            </div>
            <!--end of field privacy--> <span class="clearfloater"></span>
        </div>
        <!--end of caontact number-->
    </div>
    <!--end of contact number wrapper-->
    <button id="b-0" class="btn add-more" type="button">
        <img src="images/profile-page/add-new-field.png" alt="" />Add another</button>
</li>

这是我用于开发新入口字段的 JS。

$(document).ready(function () {
    var next = 1;
    $(".add-more").click(function (e) {
        var newdiv = document.createElement('div');
        newdiv.className = 'contact-number' + next + '';
        document.getElementById('contact-number-wrapper').appendChild(newdiv);
        newdiv.innerHTML = '<div class="field-del"><a href="#" class="field-del-button"></a></div><!--end of field del--><div class="field-title"><select name="country"><option value="contact-number" selected>Contact Number</option><option value="office-number">Office Number</option><option value="house-number">House Number</option><option value="mobile-number">Mobile Number</option></select></div><!--end of field title--><div class="field-input"><input autocomplete="off" class="input new-entry" id="contact-text-field' + next + '" name="contact-text-field' + next + '" type="text" value="" placeholder="Add New Number" /></div><!--end of field input--><div class="field-privacy"><dl id="sample-3' + next + '" class="dropdown"><dt><a href="#"></a></dt><dd><ul><li><a href="#">Public</a></li><li><a href="#">Friends</a></li><li><a href="#">only me</a></li><li><a href="#">Custom</a></li></ul></dd></dl></div><!--end of field privacy--><script>$(".dropdown dt a").click(function(e){$(this).parent().next().fadeToggle("fast");});$(".dropdown dt a").blur(function(e){if ($(e.target).not(".dropdown ul")){$(".dropdown dd").fadeOut();}});</script><span class="clearfloater"></span>';
        next = next + 1;
    });
});

我的问题是我在这篇文章中使用的下拉菜单。这也是一个 JS 支持的下拉菜单，它在静态帖子中工作，但是当我使用 JS 创建动态帖子或新帖子时，此下拉菜单不起作用。 有人告诉我在新的帖子功能中重新绑定(bind)下拉功能。但我在 JS 中为空，我不知道该怎么做。请向我建议一些事情，隐私下拉菜单也应该在新帖子中起作用。 这是我的“隐私设置”下拉列表的 Js 代码(包含在 html 中的 field-privacy div 中)。

$(".dropdown dt a").click(function(e){
    $(this).parent().next().fadeToggle("fast");
});
$(".dropdown dt a").blur(function(e){
    if ($(e.target).not(".dropdown ul")){
        $(".dropdown dd").fadeOut();
    }
});

Answer 1

这实际上是一个(非常...)常见的问题。

您必须使用所谓的“事件委托(delegate)”:

$(document).on('click', ".dropdown dt a", function(e){
    $(this).parent().next().fadeToggle("fast");
});

$(document).on('blur', ".dropdown dt a" , function(e){
    if ($(e.target).not(".dropdown ul")){
        $(".dropdown dd").fadeOut();
    }
});

这适用于现在和 future 的元素。它将监听元素的创建并自动将事件绑定(bind)到它们。