Ajax append new data but links do not work

Question

I have something similar to this:

$('.new-post').on('click', function(e) {
  e.preventDefault();
  $.ajax({
    url: '/somehting'
    data: {my data},
    ...etc,
    success: function(data) {
      $.get('template.html', function(h) {
        var el = $(h);
        el.find('items').text('texts...');
        el.appendTo('.myElement');
      });
    }
  });
});

I'm posting a new post using ajax and I wish that after it has been saved to the server it is appended to the existing posts list.

It works fine but if I click on links that I append using the html template nothing seems to work...

Probably I used a wrong strategy to do that, so here I need a bit of your help.

I used $.get within the success method in order to get an html template where to insert new post data to append. I know that $.get is async but for some reason it doesn't work until I don't refresh the page...

EDIT (HTML)

<li>
  <h2></h2>
  <p></p>
  <ul class='actions'>
    <li><a href='link to the post'></a>
    <li><a href='#' data-modal='comment-modal'>Comment</a>
  </ul>
</li>

"nothing seems to work" is an awfully vague problem statement. What do you expect the links to do, and what happens instead? (For instance: Do you expect an event handler related to the link to be triggered? If so, [this question and its answers](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) are for you.) — T.J. Crowder, Sep 12 '14 at 08:02
I expect the link go to the page... it's a link but it doesn't fire. `a href="http://www.google.com"` it doesn't work. Even if I wish to open a modal it doesn't work. — Ayeye Brazo, Sep 12 '14 at 08:04
what kind of links are there => post the html that is rendered in your question pls? — cpoDesign, Sep 12 '14 at 08:05
HTML has been added to the post. Both the actions link doesn't work until I don't refresh the page — Ayeye Brazo, Sep 12 '14 at 08:08
ok the issue when data are loaded to your site using ajax, the there is no jquery bindings. what you need to to do is register the actions for the content. — cpoDesign, Sep 12 '14 at 08:24
Have you tried to use load instead get $( .element" ).load( "template.html", function() { $('.actions a')[0].text('...');//i don't know what you need }); — keypaul, Sep 12 '14 at 08:28

score 0 · Answer 1 · answered Sep 12 '14 at 08:08

I don't know what exactly you append, but if your append something which contains <a href="your url"> Text</a> then link should work. Insted if you want tu simulate your link, let's say you have somethink like this <span class="myclass">Click here</span> you should add an jQuery event:

el.find("span.myclass").click(function(){
    //do something 
})

I hove I understand what you want to do.

score 0 · Accepted Answer · answered Sep 12 '14 at 08:26

You would have to add the rebinding in the success handler if you want to execute it after the Ajax call:

success: function(data) {
    elem.replaceWith(data);
    $('.actions').bind('click', /* some function needs to go here*/);
}

check following links

[1]: http://api.jquery.com/live/ [2]: http://api.jquery.com/delegate/ [3]: http://api.jquery.com/on/ [4]: http://api.jquery.com/live/

Ajax append new data but links do not work

2 Answers2