Let's say the answer from ajaxa:

content = '<p><a href="#" data-id="'+value['post_id']+'" class="btn btn-primary read-more" role="button">Read more</a></p>' $('section').append(content);

and let's say after

  $('.read-more').click(function(){ alert('ok'); });

That does not alert (

//

Complete code:

When clicking on a particular category, posts are displayed:

  $('.cat').click(function () { data = {id: $('a', this).data('id')}; $.ajax({ url: base_url + 'getContentByCategory', method: 'POST', data: data, success: function (response) { $('section').html(''); obj= JSON.parse(response); $.each(obj, function(key, value){ content = '<div class="row">' + '<div class="col-sm-6 col-md-4">' + '<div class="thumbnail">' + '<div class="caption">' + '<h3>'+value["tittle"]+'</h3>' + '<p>'+value["content"]+'</p>' + '<p class="read-more"><a href="#" data-id="'+value['post_id']+'" class="btn btn-primary" role="button">Read more</a></p>' + '</div></div></div></div>'; $('section').append(content); }); } }) });

After that, when you click the read more button, I want to open one post, the one that was chosen:

  $('.read-more').click(function(){ alert('ok'); data={post_id:$('a', this).data('id')}; $.ajax({ url: base_url + 'getSinglePost', method: 'POST', data: data, success: function (response) { $('section').html(''); obj= JSON.parse(response); $.each(obj, function(key, value){ console.log(value); content= '<div class="page-header">'+ '<h1>'+value['tittle']+'</h1>'+ '</div>'+ '<p>'+value['content']+'</p>'; $('section').append(content); }) } }); });

    1 answer 1

    Is jquery itself connected? This error is usually due to the lack of jquery.
    Please check jquery inbox.
    Your code is fully working: JsFiddle

    • Yes, if you just copy this line and paste on html, then everything works, but after the exhaust ajaxa does not work, I do not understand why. - Alexander Reizan
    • Try to lay out the code entirely. - Urmuz Tagizade
    • four
      if ajax changes the DOM where the link lives, then this results in a new link without events. After ajax, you need to re-hang the handler, or hang it on an ancestor element that does not change with ajax and check in the handler that worked on the link, or use $ (document) .on ('click', '.read-more', handler). (And generally in jquery, it is customary to hang event handlers via on: $ ('. Read-more'). On ('click', handler)) - Sergey
    • Fine! ) Helped! Now all the time I will be through on)) Thank you! - Alexander Reizan