Laravel blade : ajax replaced html portion don't interact with jQuery

Question

I'm developing a Laravel project and I'm facing an issue with Ajax and Blade template. In my scenario I have several tag (it can be divs, buttons or list items) with a class ajaxaction and an attribute data-route, like this:

      <button type="button" class="ajaxaction" data-route="http://localhost/webora/public/d/5106">
      <button type="button" class="ajaxaction" data-route="http://localhost/webora/public/d/5105">
      <button type="button" class="ajaxaction" data-route="http://localhost/webora/public/d/5104">
      <button type="button" class="ajaxaction" data-route="http://localhost/webora/public/d/5103">
      <button type="button" class="ajaxaction" data-route="http://localhost/webora/public/d/5102">

and a tag wrapping the content i will replace:

<div class="content">

</div>

In this page I have the script like this:

$('.ajaxaction').click(function () {
  ajaxURL = $(this).attr('data-route');
  $.get( ajaxURL, function(data) {
    $('.content').html(data);
  })
  .fail( function(jqXHR, textStatus, errorThrown) {
    $('.content').html(textStatus + ' ' + errorThrown);
  });
});

As I expect every time a tag is clicked the ajax send a GET request that return an HTML that replace the previous in content. In some case the content replaced has a tag with class ajaxaction itself like this:

<div class="content">
    ...
    <button type="button" class="ajaxaction" data-route="http://localhost/webora/public/d/5199">
    ...
</div>

But clicking on this tag do not send any ajax request.

in case you have a time, "event delegation" is a must read topic here — Chay22
– Chay22, Commented Nov 30, 2017 at 14:34
Use the .on() method to delegate the click event to (future) elements dynamically added to the DOM: stackoverflow.com/questions/15420558/… — Mehdi Alipour
– Mehdi Alipour, Commented Nov 30, 2017 at 14:36

Kenneth Sunday · Accepted Answer · 2017-11-30 14:56:42Z

0

You might want to consider this jquery ajax solution.

from your existing code.

    $('.ajaxaction').click(function () {
  ajaxURL = $(this).attr('data-route');
  $.get( ajaxURL, function(data) {
    $('.content').html(data);
  })
  .fail( function(jqXHR, textStatus, errorThrown) {
    $('.content').html(textStatus + ' ' + errorThrown);
  });
});

<div class="content">
    ...
    <button type="button" class="ajaxaction" data-route="http://localhost/webora/public/d/5199">
    ...
</div>

to this one. since you wrap your buttons already in your div. You create a script like this.

$('div.content').on(".ajaxaction","click",function(){
   var _btn = $(this);  
   $.ajax({
      url : _btn.data('route'),
      success : function(data){
          //your success data here

      },
      error : function(jqXHR,textStatus,thrownError){
        console.log(jqXHR); 
     } 
   })
});

don't use the attr('data-xxxx') because once they change the value of your data-xxxx, it will reflect to your code and run the code with the changes unlike with data('xxxx'), the initial value will still be the value even if they change it.

edited Nov 30, 2017 at 14:56

answered Nov 30, 2017 at 14:45

Kenneth Sunday

8957 silver badges14 bronze badges

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

2 Comments

Chay22 Over a year ago

As of jQuery 3.0, .delegate() has been deprecated. It was superseded by the .on() method since jQuery 1.7, so its use was already discouraged. api.jquery.com/delegate

Kenneth Sunday Over a year ago

on that case , you can just update the function delegate to 'on' and still work ;) right ?

AlexMI · Accepted Answer · 2017-11-30 15:43:56Z

0

I mark as answered my question because the solution provided by @Chay22 and @Mehdi Alipour in their comments is exactly what I need to know.

event-delegation

edited Nov 30, 2017 at 15:43

answered Nov 30, 2017 at 14:58

AlexMI

9861 gold badge18 silver badges41 bronze badges

Collectives™ on Stack Overflow

Laravel blade : ajax replaced html portion don't interact with jQuery

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related