jQuery Mobile/Template/dynamic element events

это мой первый пост, посвященный stackoverflow, поэтому я заранее извиняюсь за то, что не получил это сообщение правильно. Моя проблема заключается в удалении DIV, который динамически создается через шаблон. я пробовал использовать .on но это не работает. Я могу удалить первый div, который загружается со страницей, но добавленные позже не будут удаляться (у меня есть предупреждение, вставленное для тестирования сейчас).jQuery Mobile/Template/dynamic element events

Вот мой источник:

<!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>

Спасибо!

источник

2014-04-05 user2946041

Я не знаю Почему jQuery не запускает событие click, но Я думаю, что этот компонент collapse блокирует ваш обработчик события click, когда вы нажимаете свернуть заголовок.

Итак, вы можете использовать альтернативное событие мыши, например 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>

BTW, Есть еще одна проблема в вашем коде. Элемент h3 в # div-шаблоне может привести к дублированию идентификатора. Я изменил этот атрибут id на атрибут класса.

Извините за мой плохой английский. Надеюсь, мой ответ был полезен. Спасибо!

источник

2014-04-08 20:22:31

Спасибо, что отлично работает! – user2946041

jQuery Mobile/Template/dynamic element events

ответ

Смежные вопросы