Add and edit AJAX element

Question

Good,
I want to edit a trafter creating it and acquired by AJAX.

1. When I click on create 'Tag':

   $('#confirmCreateBrand').click(function(){
   brand = $('#createbrand_name').val();
   advertiser = $(this).attr('advertiser-id');
   user = $(this).attr('user-id');
   
   
   if(brand == ""){
     $('#createbrand_name').css('border','1px solid red');
     $('#createbrand_name_error').show();
     return false;
   }
   
    var brand = {
           advertiser_id: advertiser,
           name: brand,
           user : user,
           _token :"{{ csrf_token() }}",
         }; 
   
     $.ajax({
       url: '{{ URL::to('brand/store/') }}',
       type: 'POST',
       dataType: 'JSON',
       data: brand,
       success: function(brand) {
       $('#brandsTable').find('tbody:last-child').append('<tr id="brand-'+brand.id+'"><td>'+brand.name+'</td><td> <button brand-id="'+brand.id+'" brand-name="'+brand.name+'" brand-advertiser="'+{{$advertiser->id}}+'" tabindex="-1" role="dialog" data-toggle="modal" data-target="#editBrandModal" class="editBrandBtn"><i class="fa fa-pencil"></i></button> <button brand-id="'+brand.id+'" brand-name="'+brand.name+'"  tabindex="-1" role="dialog" data-toggle="modal" data-target="#deleteBrandModal" class="deleteBrandBtn"><i class="fa fa-trash"></i></button> </td></tr>');
   
           $('#createBrand').modal('hide');
   
         $('#createBrand input').val('');
       }
     }); 
   

   })

2. This function adds a tr with the buttons edit and delete.

3. But when I click the edit on an element after I add it, I do not enter this function. Refresh the page and enter.

   $('.editBrandBtn').click(function(){
   name = $(this).attr('brand-name');
   brand_id = $(this).attr('brand-id');
   alert(brand_id);
   $('#editbrand_name').val(name);
   $('#confirmEditBrand').attr('brand-id',brand_id);
   

   });

can help me, sff?

Answer 1

I’ve solved this question...

I put all my JS inside:

$(document).bind('ready ajaxComplete', function(){
  //TodoJSdesteFicheiro
});

As the element is added after the AJAX run and the Edit and Delete functions were only available in Ocument ready, this change is necessary before javascript, so that the functions are available when the DOM is 'ready' and after 'Ajaxcomplete''.