Why I cannot supress this cell

[jemz]

Hi, can I ask some help I cannot click my delete button properly because I have also script that I can click the table row. when I click the delete button the table row will be trigger how can I only click the button without triggering the table row. ?

  <table class="table table-striped table-hover" id="mytable">

   <tr>
       <th>id</th>
       <th>name</th>
       <th>lastname</th>
       <th>address</th>
       <th></th>
   </tr>

</table>

here is my javascript

// main.js

$('#mytable').on('click','tr',function(){
    // do somestuff here
});

here is how I dynamically create the table row

I am using ajax here and it works fine

for(var i=0;i<data.length;i++){
      $('#mytable tbody tr:last').after('<tr id="'+data['id'][i]+'"><td>'+data['id'][i]+'</td><td>'+data['name'][i]+'</td><td>'+data['lastame'][i]+'</td><td>'+data['age'][i]+'</td><td><button class="btn btn-danger btn-block btn-sm" type="submit">Delete</button></td></tr>');

}

Here is how I click the button

    $('#mytable').on('click','button.del',function(e){
              e.stopPropagation();
            // do somestuff here
        });

Thank you in advance.

[James_Hibbard]

Hi jemz,

What’s the content of data (just so I can get your code to run)?

[jemz]

Hi pullo thank you for the reply.

here is the data

{"id":["00073","00072","00073","00074"],"name":["john","mike","sheila","alexa"],"lastname":["miller","fedelen","lamber","zorko"],"age"
:["24","30","28","30"]}

Thank you in advance

[PaulOB]

@jemz

Here is how I click the button

$('#mytable').on('click','button.del',function(e){
          e.stopPropagation();
        // do somestuff here
    });

I don’t see a button.del anywhere in your code? I see a btn-danger though.

@James_Hibbard will be able to confirm but I’m guessing you could do it in one function anyway.

e.g.

$('#mytable').on('click','tr',function(e){
		if ($(e.target).hasClass('btn-danger')){
			alert('Button Danger clicked')
			} else{
			alert('Row clicked')	
		}
});

[jemz]

Is my code correct ? but I think that is correct I don’t know why sometimes if I click the button the row will be trigger, then if I I click again I can click the button…sometimes willl work sometimes not.

Thank you in advance.

[jemz]

there is a class del and I could not edit anymore my post.

[PaulOB]

Try the code I gave in my example (change the classname accordingly) and then you don’t need to worry about stopping propagation.

If its some other issue then set up a demo (codepen or fiddle) so we can see it in action.

[jemz]

Okay I tested now I changed my code and it seems it’s working. I’ll try to observe this.

Thank you so much

[James_Hibbard]

@PaulOB

@Pullo will be able to confirm but I’m guessing you could do it in one function anyway.

Yup, that’s more or less what I would have done : )

[PaulOB]

@James_Hibbard

Yup, that’s more or less what I would have done

I must be improving at last