委托事件的處理程序未在動態注入的HTML上調用

Question

在我的HTML中，我有一個div，在其中我動態插入了一個帶有額外按鈕的可折疊對象。

這是原始的HTML：

<div data-role="main" class="ui-content">
    <a id="btnSearch" data-role="button" data-icon="search" data-inline="true" data-iconpos="notext"></a>
    <div id='resultList'></div>
</div>

這是注入的HTML：

<div class='resultItem' data-role='collapsible' data-id='3537' data-content-theme='c'>
    <h5>Biatorbagy(65 - 312)<div><a data-role='button' class='resultZoomButton ui-btn ui-btn-icon-notext ui-icon-search ui-mini ui-corner-all ui-btn-right'></a></div ></h5>
    <p class='attribution'>Year</p>
    <p class='value' style='white-space:pre-wrap'>1997</p>
    <p class='attribution'>Path</p>
</div>

對於額外的按鈕，我想綁定一個事件處理程序，並且由於將插入多個可折疊對象，我決定附加一個委托的事件處理程序（ 基於JQuery help ）。 我使用JQuery的on方法將其添加到$（document）.ready（function（））中，如下所示：

$(document).ready(function () {    
    $('#resultList').on('click','a.resultZoomButton',function(e){
        alert(e.type + 'event fired!')
    });
});

但是沒有調用事件處理程序。 為什么？

我認為，如果在定義事件處理程序時具有resultList id的div已經存在，那么在事件的冒泡階段，它應該為具有resultZoomButton類的元素過濾。 （我也嘗試了e.preventDefault（），但沒有成功。）

附加的jsfiddle： http : //jsfiddle.net/bsimo/5LwLmu2s/4/

jQuery的：1.9.1。 JQM：1.4.0

Answer 1

發生這種情況是因為事件未正確冒泡。

我不確定jQuery Mobile事件處理如何導致事件停止。

一種解決方案是在對象創建后立即將單擊處理程序綁定到對象。

$(document).ready(function () {

    $('#btnSearch').on('click', function () {      
        $('#resultList').html( "<div class='resultItem' data-role='collapsible' data-id='3537' data-content-theme='c'><h5>Biatorbagy(65 - 312)<div><a data-role='button' class='resultZoomButton ui-btn ui-btn-icon-notext ui-icon-search ui-mini ui-corner-all ui-btn-right'></a></div ></h5><p class='attribution'>Year</p ><p class='value' style='white-space:pre-wrap'>1997</p><p class='attribution'>Path</p></div>").enhanceWithin();
        $('#resultList').find('a.resultZoomButton').click(function(e){
            console.debug('Fire');
        });

    });
});

這不是理想的方法，但是最好的方法是在創建項目后添加處理程序。 看來您將要獲得多個結果。 您不想每次都將一個事件綁定到每個事件。

我建議在添加單擊處理程序之后，還向對象添加一個特殊的“綁定”類，以便每個結果僅綁定一次。

$(document).ready(function () {

    $('#btnSearch').on('click', function () {      
        $('#resultList').html( "<div class='resultItem' data-role='collapsible' data-id='3537' data-content-theme='c'><h5>Biatorbagy(65 - 312)<div><a data-role='button' class='resultZoomButton ui-btn ui-btn-icon-notext ui-icon-search ui-mini ui-corner-all ui-btn-right'></a></div ></h5><p class='attribution'>Year</p ><p class='value' style='white-space:pre-wrap'>1997</p><p class='attribution'>Path</p></div>").enhanceWithin();

        var zoomButtons = $('#resultList').find('a.resultZoomButton');

        zoomButtons.each(function(){
            if(!$(this).hasClass('bound')){
                $(this).click(function(e){
                    console.debug('Fire');
                }).addClass('bound');
            }
        });

    });
});

這是更新的小提琴 。