0

回答：

/* 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下拉列表选择的选项。我希望用户单击 ali 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

4

2 回答 2

1

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

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

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

于 2013-08-29T20:33:05.023 回答
0

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

所以你的解决办法是：

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

至：

var ind_option_html = $( this ).find( '.item-display' ).clone();
于 2013-08-29T18:40:40.187 回答