javascript - 使用 .each() 在页面加载上绑定(bind)处理程序，并使用 jQuery .clone(true,true) 采用它们

Question

为了准备下拉元素及其行为，我绑定(bind)了单击事件处理程序，以使用 jQuery .each() 显示/隐藏适当的浅 div(例如下拉菜单列表)。

// Excerpt, this is just for debugging purpose, s. below also

$('.m-dropdown-select__trigger').each(function() {

    var triggerElem = $(this);

    triggerElem.on('click', function(e) {
        if(e) e.stopPropagation();
        if(e) e.preventDefault();
        if(triggerElem.hasClass('is-open')) {
            // debug if we are in the original or cloned object
            alert('hide this, ' + triggerElem.closest('dl').attr('id') + ', parent: ' + triggerElem.parents('.m-form-elements--accompanied__item').attr('id'));
            triggerElem.removeClass('is-open');
        } else {
            // debug if we are in the original or cloned object
            alert('show this, ' + triggerElem.closest('dl').attr('id') + ', parent: ' + triggerElem.parents('.m-form-elements--accompanied__item').attr('id'));
            triggerElem.addClass('is-open');
        }
    });
});

当我深度复制(使用 .clone(true, true))包含这些下拉列表之一的 div 时，事件处理程序不绑定(bind)到克隆 div 内的下拉列表 但在原始对象上。

例如我在页面中的某个位置有一个链接，它复制附加的伴奏表单输入(以及称呼的下拉列表)并将它们插入到最后一项之后。

// Clone first hardcoded container, adapt some attributes and insert it

var accompaniesCount = 2;

$('.js-add-accompanies').on('click', function(e) {
    if(e) e.preventDefault();

    var count = accompaniesCount++;

    // Grap the first (hardcoded) item and copy it
    var cont = $('#accompanied-item-1').clone(true, true);

    // change clone attributes
    cont.attr('id', 'accompanied-item-' + count );
    cont.find('.m-form-elements--accompanied__heading span').text(count);
    cont.find('.m-dropdown-select__select')
        .attr('id', function(index, attr) {
                return attr.replace(1, count);
            })
        .attr('name', function(index, attr) {
                return attr.replace(1, count);
            })
    cont.find('.m-dropdown-select__definitionlist')
        .attr('id', function(index, attr) {
                return attr.replace(1, count);
            })
    cont.find('input').val('');

    cont.insertAfter($('[id^=accompanied-item-]:last'));

});

演示:http://jsfiddle.net/felic/L98jzkko/18/

fiddle 示例的信息:单击“Anrede”两次以获取调试输出。然后点击“添加伴奏”并在那里切换“Anrede”。父对象始终是第一个条目(例如原始对象)。

我在这里缺少什么？提前谢谢。

Answer 1

您正在处理动态元素，因此注册事件处理程序的方法是使用事件委托(delegate)

$(document).on('click', '.m-dropdown-select__trigger', function(e) {
    var triggerElem = $(this);
    if(e) e.stopPropagation();
    if(e) e.preventDefault();
    if(triggerElem.hasClass('is-open')) {
        // debug if we are in the original or cloned object
        alert('hide this, ' + triggerElem.closest('dl').attr('id') + ', parent: ' + triggerElem.parents('.m-form-elements--accompanied__item').attr('id'));
        triggerElem.removeClass('is-open');
    } else {
        // debug if we are in the original or cloned object
        alert('show this, ' + triggerElem.closest('dl').attr('id') + ', parent: ' + triggerElem.parents('.m-form-elements--accompanied__item').attr('id'));
        triggerElem.addClass('is-open');
    }
});

演示:Fiddle