CODEWITHSUNDEEP
jqueryajaxdom
iProgrammer
iProgrammer

Reputation: 766

Selector not working after adding new element to DOM in jQuery

I have a div with ID 'content'. Into this div located text input and span with date. Into a span i wrote added date of content. For this span i used Timeago plugin to every minute updating difference of current time with added. When I update this content jQuery not select new added element. What I must do? This is code: HTML code:

<div id="content">
    <input id="text" type="text" name="yourName"/>
    <button type="button" onclick="changeContent();">Change</button>
    <span class="timeago" title="2014-03-30 20:04"></span>
</div>

Javascript code:

<script language="text/javascript">
    function changeContent() {
        var content = $('#content');
        var value = $('#text').val();
        var spanElm = $('span.timeago');
        $.ajax({
            url:'/ajax/change.php',
            dataType: "json",
            type: "POST",
            cache: false,
            data: {"text":value},
            success: function (data) {
                spanElm.remove();
                content.append(data);
            }
        });
    }
    jQuery(function($) {
        jQuery("span.timeago").timeago([]);
    });
</script>

Ajax returns me a span element with new date. Example: <span class="timeago" title="2014-03-30 20:07"></span>.

Upvotes: 0

Views: 936

Answers (1)

Amit Joki
Amit Joki

Reputation: 59252

Use this jQuery("span.timeago").timeago([]); inside success callback.

Because ajax is asynchronous in nature.

Full code:

<script language="text/javascript">
    function changeContent() {
        var content = $('#content');
        var value = $('#text').val();
        var spanElm = $('span.timeago');
        $.ajax({
            url:'/ajax/change.php',
            dataType: "json",
            type: "POST",
            cache: false,
            data: {"text":value},
            success: function (data) {
                spanElm.remove();
                content.append(data);
                jQuery("span.timeago").timeago([]);
            }
        });
    }
</script>

Upvotes: 1

Related Questions