Question

这是我第一次在stackoverflow上发帖，所以我提前道歉，因为没有真正得到这篇文章。我的问题是删除通过模板动态创建的DIV。我试过使用.on但这不起作用。我可以删除加载页面的第一个div，但稍后添加的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>

谢谢！

Answer 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属性。

抱歉我的英语不好。我希望我的回答很有帮助。谢谢！

jQuery Mobile / Template / dynamic元素事件

1 个答案: