Доступ к динамически отображаемому html с jquery

Question

Я создаю страницу, где пользователи могут добавлять теги (или ключевые слова), похожие на SO. Когда новый тег добавляется, я генерирую div и добавляю его в контейнер div через jquery ниже, который работает нормально.

// add new keyword 
     $('.Add_Keyword').click(function() { 
      // Perform the ajax post 
      $.post("/Content/_AddKeyword", { "keyword": document.getElementById('Keyword').value, "ContentId": document.getElementById('ContentId').value }, 
       function (data) { 
        // Successful requests get here 
        // Update the page elements 
        document.getElementById('Keyword').value = ''; 
        var new_div = $('<div class="float-left" id=tag-"' + data.KeywordId + '">' + data.Keyword + '<a href ="#" class="Remove_Keyword" data-id="' + data.KeywordId + '">[X]</a></div>'); 
        $('#all_tags').append(new_div); 
       }); 
     }); 

Вновь сформированные дивы имеют идентификатор = tag- и содержат ключевое слово (текст) и якорный тег, который может быть нажата, чтобы удалить это ключевое слово. Ниже приводится JQuery, чтобы удалить тег:

// remove keyword 
     $('.Remove_Keyword').click(function() { 
      var keywordToRemove = $(this).attr("data-id"); 
      $.post("/Content/_RemoveKeyword", { keywordId: keywordToRemove }, 
       function (data) { 
        // Successful requests get here 
        // Update the page elements 
        debugger 
        if (data.IsDeleted) { 
         var del_div = $('#tag-' + data.DeleteId); 
         del_div.hide(); 
        } 
       }); 
     }); 

Это работает для дивы, созданных с помощью GET, но не работает для динамически создаваемых дивы ..... Любые идеи, почему ??? Ниже приводится HTML:

<fieldset> 
<legend>Keywords</legend> 
<ol> 
    <li> 
     @Html.LabelFor(m => m.Keyword) 
     @Html.TextBoxFor(m => m.Keyword) 
    </li> 
    <li> 
     <a href="#" class="Add_Keyword">Add</a> 
    </li> 
</ol> 
</fieldset> 
<div id="all_tags"> 
    @foreach (var item in @Model.KeywordList) 
    { 
     <div class="float-left" id="tag-@item.KeywordId"> 
      @item.Keyword 
      <a href="#" class="Remove_Keyword" data-id="@item.KeywordId">[X]</a> 
     </div> 
    } 
</div> 

Answer 1

Используйте .on() прикрепить события для динамически создаваемых HTML элементов:

$("div[id^=tag-]").on('click','.Remove_Keyword',function (e) { 
     e.preventDefault(); 
     var keywordToRemove = $(this).attr("data-id"); 
     $.post("/Content/_RemoveKeyword", { keywordId: keywordToRemove }, 
      function (data) { 
       // Successful requests get here 
       // Update the page elements 
       debugger 
       if (data.IsDeleted) { 
        var del_div = $('#tag-' + data.DeleteId); 
        del_div.hide(); 
       } 
      }); 
}); 

Answer 2

$(body).on('click', 'newelementid',function() { 
$('.Remove_Keyword') 
}); 

Delagation

On in Jquery

Answer 3

У вас есть неуместной цитаты в вашей код на id, для одного:

var new_div = $('<div class="float-left" id=tag-"' 

должен быть

var new_div = $('<div class="float-left" id="tag-' 

И вы, вероятно, не хотите, чтобы применить .RemoveKeyword нажмите событие , прежде чем вы даже построили динамические дивы в коде ... поэтому я бы применил это событие после последней строки вашего вызова ajax ($('#all_tags').append(new_div);), как только элемент на самом деле там.

Example JSFiddle