2016-07-26 3 views
-2

Я просматриваю учебник списка задач для jQuery, и я столкнулся с проблемой, которую я не могу понять. Мой код выглядит точно так же, как в видео. Я попытался сделать это как на Plunker, так и на JSFiddle и не смог заставить его работать. Кто-нибудь может понять, что не так с этим?

Вот мой HTML:

<!DOCTYPE html> 
<html> 

    <head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <link rel="stylesheet" href="style.css" /> 

    </head> 

    <body> 
    <h1>Tasks</h1> 

    <ul id="todoList"> 

    </ul> 

    <input type="text" id="newText" /><button id="add">Add</button> 



    <script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script> 
    <script src="script.js"></script> 
    </body> 

</html> 

и мой JQuery:

function addListItem() { 
    var text = $('#newText').val(); 
    $('#todoList').append('<li>' + text + ' <button class="delete">Delete</button></li>'); 
    $('#newText').val(''); 
} 

function deleteItem() { 
    $(this).parent().remove(); 
} 

$(function() { 
    $('#add').on('click', addListItem); 
    $('.delete').on('click', deleteItem); 
}); 
+0

'$ (". Delete ")' только выбирает существующие элементы 'class =" delete "', он не выбирает элементы, которые еще не существуют. –

ответ

-2

Попробуйте это:

$('.delete').on('click', deleteItem); => $('body').on('click', '.delete', deleteItem); 

Объясните: если вы хотите связать событие к элемент, который еще не существует, вы должны сначала привязать к документу.

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