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>

对于额外的按钮，我想绑定一个事件处理程序，因为插入了多个可折叠的，我决定附加一个委托的事件处理程序（based on JQuery help）。我在$（document）.ready（function（））中添加了这个，如下所示：JQuery＆＃39; s on method：

$(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');
        });

    });
});

这不是理想的，但最好的方法是在创建项目后添加处理程序。你似乎也会得到多个结果。您不希望每次都将事件绑定到每个事件。

我建议在添加click处理程序之后，还要向对象添加一个特殊的“bound”类，以便每个结果只绑定一次。

$(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');
            }
        });

    });
});

这是updated fiddle。

委托事件的处理程序未调用动态注入的HTML

1 个答案: