Question

答案：

/* I bound the events via the parent instead of binding it 
   on each span tag individually. this allowed me to manipulate
   the span tags uniquely. ( thank you Jason P ) */
$( '.selected-option-wrapper' ).on( 'click', 'span', function() { });

声明：

我正在失去理智。

细节：

我尝试在html列出一组用户通过ul/li下拉菜单选择的选项。我希望用户点击li a并在a标记中包含部分html，将其放在单独的div中。

例如：

HTML

// html within the li tag that I want cloned over
<a id="met" class="item-1" href="#">
    <div class="left check-wrapper">
        <span class="gicon-ok"></span>
    </div>
    <div class="hide item-display"> // exact element to be moved over
        <span class="gicon-remove-sign left remove-option-item"></span>
    <div class="left">Metallic Thread</div>
</a>

的javascript

$( '.options' ).find( 'a' ).on( 'click', function( e ) {

    ind_option_html = $( this ).find( '.item-display' ).clone();

    /* attach a click event to the span tag */
    ind_option_html.find( 'span' ).on( 'click', function() { 
        console.log( this );
    });

    /* this is in a $.each loop that appends each new ind_option_html */
    $( '.selected-option-wrapper' ).show().append( ind_option_html );

});

问题

每当我点击一个li a时，该功能都会正常运行，this标记的span会被注销。但令人惊奇的是，当用户点击另一个li a时，click事件只会放在最新的span标记上。

第一个onclick标记的span事件在哪里？

Answer 1

我不确定你为什么遇到这个问题，但你可以使用事件委托来避免它。不是每次都绑定事件处理程序，而是在DOM准备就绪时这样做：

$('.selected-option-wrapper').on('click', 'span', function() { ... });

请参阅on()以及有关直接和委派事件的部分。

Answer 2

初始var ind_option_html（或者是偶然的全球性）在哪里？看起来点击处理程序的所有实例都使用相同的引用，这始终是最后一个要处理的引用。

所以你的解决方案是：

ind_option_html = $( this ).find( '.item-display' ).clone();

为：

var ind_option_html = $( this ).find( '.item-display' ).clone();

在以前的元素上删除click事件

2 个答案: