jQuery Mobile / 模板 / 动态元素事件答案

【问题标题】：jQuery Mobile / Template / dynamic element eventsjQuery Mobile / 模板 / 动态元素事件
【发布时间】：2014-04-05 00:50:39
【问题描述】：

这是我第一次在 stackoverflow 上发帖，所以我提前道歉，因为我没有真正把这篇文章写对。我的问题是删除通过模板动态创建的 DIV。我试过使用 .on 但这不起作用。我可以删除与页面一起加载的第一个 div，但以后添加的不会删除（我现在插入了一个警报来测试）。

这是我的来源：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta name="viewport" content="width=device-width, initial-scale=1">

<head>
    <title>jQuery Mobile Test </title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script> 
<style>
</style> 
</head>

<body>

<div data-role="header">
    <a href="#" id="btnAddNewDate" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-delete">New Date</a>
    <h1>My Travel Log</h1>
    <button class="ui-btn-right ui-btn ui-btn-b ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-check">Save</button>
</div>

<div id="jqM" data-role="collapsible-set" data-content-theme="a" data-theme="b">
    <div data-role="collapsible">
        <h3 data-position="inline">No Date Yet!          
            <button class="ui-btn-right ui-btn ui-btn-b ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-delete del-div"> </button>
        </h3>
            <!--<a href="#" class="ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-right"> </a>-->
            <!--<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-right">Right</a>-->
            <!--<button class="ui-btn-right ui-btn ui-btn-b ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-delete del-div"> </button>-->
        <p>Content</p>
    </div>
</div>

<script id="div-template" type="text/x-jQuery-tmpl">
    <div data-role="collapsible">
        <h3 id="h3Date"data-position="inline">${title}       
            <a href="#" class="ui-btn-right ui-btn ui-btn-b ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-delete del-div"> </a>
        </h3>
        <p>${content}</p>
    </div>
</script>

<script type="text/javascript">
    var dateDivs = [
        {title:"No Date Yet!", content:"some Content."}
    ]; 
    //$( "#myList li:first" ).clone().appendTo( "#myList" );
    $( "#btnAddNewDate" ).click(function () {
        $("#div-template").tmpl(dateDivs).appendTo("#jqM");
        $( "#jqM" ).collapsibleset( "refresh" );
        //$( "#div-template" ).clone().appendTo( "#jqM" );
    });

    $(document).on('click', '.del-div', function () {
        alert('clicked');
    });

    //$('#jqM').on( "click", ".del-div", function(){alert("delete");} );
    $(".del-div" ).click(function() {
        $(this).closest("div").remove();
    });

</script>

</body>
</html>

谢谢！

【问题讨论】：

标签： jquery html templates jquery-mobile

【解决方案1】：

我不知道为什么 jQuery 不触发点击事件，但是我认为当你点击折叠标题时折叠组件会阻塞你的点击事件处理程序。

因此，您可以替换鼠标事件，例如 mousedown、mouseup。我刚刚测试了下面的代码，它可以工作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta name="viewport" content="width=device-width, initial-scale=1">

<head>
    <title>jQuery Mobile Test </title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
    <style>
    </style>
</head>

<body>

<div data-role="header">
    <a href="#" id="btnAddNewDate" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-delete">New Date</a>
    <h1>My Travel Log</h1>
    <button class="ui-btn-right ui-btn ui-btn-b ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-check">Save</button>
</div>

<div id="jqM" data-role="collapsible-set" data-content-theme="a" data-theme="b">
    <div data-role="collapsible">
        <h3 data-position="inline">No Date Yet!
            <button class="ui-btn-right ui-btn ui-btn-b ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-delete del-div"> </button>
        </h3>
        <!--<a href="#" class="ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-right"> </a>-->
        <!--<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-right">Right</a>-->
        <!--<button class="ui-btn-right ui-btn ui-btn-b ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-delete del-div"> </button>-->
        <p>Content</p>
    </div>
</div>

<script id="div-template" type="text/x-jQuery-tmpl">
    <div data-role="collapsible">
        <h3 class="h3Date" data-position="inline">${title}
            <a href="#" class="ui-btn-right ui-btn ui-btn-b ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-delete del-div"> </a>
        </h3>
        <p>${content}</p>
    </div>
</script>

<script type="text/javascript">
    var dateDivs = [
        {title:"No Date Yet!", content:"some Content."}
    ];
    //$( "#myList li:first" ).clone().appendTo( "#myList" );
    $( "#btnAddNewDate" ).click(function () {
        $("#div-template").tmpl(dateDivs).appendTo("#jqM");
        $( "#jqM" ).collapsibleset( "refresh" );
        //$( "#div-template" ).clone().appendTo( "#jqM" );
    });

    $(document).on('mousedown', '.del-div', function () {
        $(this).closest('div.ui-collapsible').remove();
        $( "#jqM" ).collapsibleset( "refresh" );
    });


</script>

顺便说一句，您的代码中还有一些问题。 #div-template 中的 h3 元素可能会导致 id 重复。我将 id 属性更改为 class 属性。

对不起，我的英语很差。我希望我的回答对您有所帮助。谢谢！

【讨论】：