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, Nov 30 '17 at 14:34
Use the .on() method to delegate the click event to (future) elements dynamically added to the DOM: https://stackoverflow.com/questions/15420558/jquery-click-event-not-working-after-append-method — Mehdi Alipour, Nov 30 '17 at 14:36

Kenneth Sunday · Answer 1 · 2017-11-30T14:56:42.230

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.

_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._ http://api.jquery.com/delegate/ — Chay22, Nov 30 '17 at 14:47
on that case , you can just update the function delegate to 'on' and still work ;) right ? — Kenneth Sunday, Nov 30 '17 at 14:55

AlexMI · Accepted Answer · 2017-11-30T15:43:56.227

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 '17 at 15:43

answered Nov 30 '17 at 14:58

AlexMI

824
1
15
36

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

2 Answers2