Question

基本上，只要点击上面设置菜单中的“删除”，我就会替换内容中的div。好吧它确实从可折叠集变为复选框，下面的页脚包含两个按钮。按钮是删除和取消，但我无法使用这些按钮执行任何操作。例如，如果单击取消，则应弹出警报弹出窗口（为了测试）。请帮忙..

<div data-role="content">
<a href="#popupKatagoriPengeluaran" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-icon-plus ui-btn-icon-left ui-btn-a" data-transition="pop">Tambah Katagori</a>

<div id="Outcome" data-role="collapsibleset" data-theme="a" data-content-theme="a" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d"></div>
        </div>





     $("#Delete").click(function(){


    $("#Outcome").replaceWith('<form><fieldset data-role="controlgroup" id="OutcometoDelete">');

    db.transaction (function (transaction) 
    {
        var sql = "SELECT * FROM KatagoriPengeluaran";
        transaction.executeSql (sql,[],
        function (transaction, result)
        {

            if (result.rows.length)
            {   



                for(var i = 0; i< result.rows.length; i++ ) {
                All2 =result.rows.item(i);
                element = $(' <input type="checkbox" name="'+All2.Katagori+'" id="'+All2.Katagori+'"><label for="'+All2.Katagori+'">'+All2.Katagori+'</label>').appendTo($('#OutcometoDelete'));

                }
                All2 =result.rows.item((result.rows.length-1));
                $('#'+All2.Katagori).append('</form></fieldset>');
                $("#OutcometoDelete").append('<div id="someFooter" data-role="footer" data-position="fixed"><div id ="navbarFooter" data-role="navbar"><ul><li><a data-role="button" href="#popUpDelete">Delete</a></li><li><a  data-role="button" href="index.html#Pengeluaran" data-ajax="false" id="cancelDelete" >Cancel</a></li></ul></div></div>');
                $("#OutcometoDelete").trigger('create');
                $("#someFooter").trigger('pagecreate');
                $('#navbarFooter').trigger('pagecreate');
            }
            else
            {
                alert ("Retrieval Error");
            }




            }, error);
    });




    });

    $("#cancelDelete").click(function(){
    alert("oi");
    });

Answer 1

这是因为您的事件绑定方式不适用于将来的元素。你不能只绑定click事件并期望它将来会工作，事件必须绑定到DOM内部的东西。

所以这段代码不起作用：

$("#cancelDelete").click(function(){
    alert("oi");
});

另一方面，这段代码可以使用：

$(document).on('click',"#cancelDelete",function(){
    alert("oi");
});

第二个代码将起作用，因为事件绑定到文档，并且只要所需元素是DOM的一部分并且在其上触发适当的事件，它就会传播。这也称为委托事件绑定。

替换div不起作用Jquery Mobile

1 个答案: