Access dynamically rendered html with jquery

Question

I am building a page where the users can add tags (or keywords) similar to SO. When a new tag is added, I generate a div and append that to the container div through the jquery below which works fine.

// 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);
                });
        });

The newly generated divs have id=tag- and contain the keyword (text) and anchor tag, which can be clicked to remove this keyword. Following is the jquery to remove the tag:

// 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();
                    }
                });
        });

This works for divs created with GET, but does not work for dynamically generated divs..... any ideas why??? Following is the 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="[email protected]">
            @item.Keyword
            <a href="#" class="Remove_Keyword" data-id="@item.KeywordId">[X]</a>
        </div>
    }
</div>

Kiran · Accepted Answer · 2014-03-06 03:39:59Z

2

Use .on() to attach events for dynamically generated html elements:

$("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();
                }
            });
});

answered Mar 6, 2014 at 3:39

Kiran

20.3k11 gold badges72 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Purusartha Over a year ago

I have changed the code accrodingly..... but I am still not able to delete the dynamically added divs. Although the function triggers, the "del_div" div does not seem to exist in the rendered html.... Am i doing something wrong in the Add function??

Kiran Over a year ago

It looks everything fine.. can you check in POST method whether you are getting data? and check console for errors.

Purusartha Over a year ago

When I view the source.... I can not find the dynamically created divs in the DOM.... is that right behaviour? The POST method is returning data. There are no console errors

Purusartha Over a year ago

the delegate idea worked..... also there was a typo in my div generation code..... :) All good now

Kiran Over a year ago

@Purusartha: Good Bro. :)

Vinay Pratap Singh Bhadauria · Accepted Answer · 2014-03-06 03:47:04Z

1

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

Delagation

On in Jquery

edited Mar 6, 2014 at 3:47

answered Mar 6, 2014 at 3:41

Vinay Pratap Singh Bhadauria

9,9873 gold badges30 silver badges50 bronze badges

Comments

MikeSmithDev · Accepted Answer · 2014-03-06 04:49:17Z

1

You have a misplaced quote in your code on the id, for one:

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

should be

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

And you probably don't want to apply your .RemoveKeyword click event before you have even built the dynamic divs in the code... so I would apply that event after the last line of your ajax call ($('#all_tags').append(new_div);) once the element is actually there.

Example JSFiddle

answered Mar 6, 2014 at 4:49

MikeSmithDev

15.8k4 gold badges61 silver badges91 bronze badges

Collectives™ on Stack Overflow

Access dynamically rendered html with jquery

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related