jQuery setting attribute on click does not change the value

Question

Well i'm not really a guru in jQuery but i can do some basic stuff. However i can't get the point here. I'm listening to .btn-delete click event, setting .btn-danger data-route attribute (in the modal dialog) to the value of .btn-delete data-route attribute.

Really simple stuff, I know i'm doing it wrong. The value of data-route for .btn-danger does not change. Any help would be much appreciated, thanks.

<!-- modal confirm -->
<div id="modal-delete">
    <a class="btn-danger" data-route="">Confirm</a>
</div>

<!-- delete buttons -->
<a class="bt-delete" data-route="/user/delete/1">Delete</a>
<a class="bt-delete" data-route="/user/delete/2">Delete</a>

<script>
     $(document).ready(function() {

         // Listen to .btn-delete click
         $('.btn-delete').click(function() {

             // Get data-route for the delete button and set it in the modal
             $('#modal-delete .btn-danger')
                 .attr('data-route', $(this).data('ruote'));

             // Do ajax in .btn-danger click event
             $('#modal-delete .btn-danger').click(function() {
                 // data-route does not change
                 console.log($(this).data('route'));
             });
         });
     });
</script>

Selvakumar Arumugam · Answer 1 · 2012-03-14T16:02:52.470

0

Edit: Your code had a bunch of syntax error + selector errors (typo kind).

DEMO

The DEMO link has the fixed code, please take a look and fix your code accordingly.

$(document).ready(function( should be $(document).ready(function() {
$('.btn-delete').click(function() { should be $('.bt-delete').click(function() {
$(this).data('ruoute') should be $(this).data('route')
$('.btn-delete').click(function() { should be closed right after setting the data.
If attr is used then the console.log should use attr to print the content as console.log($(this).attr('data-route'));

Note: It is better to use data instead of attr function. See DEMO on how to use data function.

edited Mar 14 '12 at 16:02

answered Mar 14 '12 at 15:38

Selvakumar Arumugam

79,297
15
120
134

Thanks, but i need to set `data-route` for `.btn-danger` IN the modal, taking the value from `data-route` of `.btn-delete`. `.btn-danger` in the confirm button. – gremo Mar 14 '12 at 15:40
it doesnt work - try and get the console to log "/user/delete/1" and then "/user/delete/2" or the other way around ... `data()` **must** be used – Manse Mar 14 '12 at 15:53
@ManseUK I can't get the point, data() as far as i understand is used for storing arbitrary data in the NODE, i want to set html5 data-* attribute. – gremo Mar 14 '12 at 16:04
@ManseUK I agree to the point that using data is recommended, but attr should just work fine. The click function was not closed properly in the DEMO also it was logging the data when setting the attr. – Selvakumar Arumugam Mar 14 '12 at 16:04
@SKS i think the point is consistency - using `attr()` might work here but see the [following example where it wont](http://stackoverflow.com/a/7262427/572939) – Manse Mar 14 '12 at 16:16

Manse · Answer 2 · 2012-03-14T15:48:25.633

-1

$('#modal-delete .btn-danger').attr('data-route', $(this).data('ruoute'));

should be

$('#modal-delete .btn-danger').data('data-route', $(this).data('route'));

you should always use the .data() method (not attr) for getting and setting data associated with a node

There is also another couple of mistakes in your code :

$(document).ready(function(

should be

$(document).ready(function() {

and

$('.btn-delete').click(function() {

should be

$('.bt-delete').click(function() {

I have removed the n to match the HTML

Works fine for me here

edited Mar 14 '12 at 15:48

answered Mar 14 '12 at 15:41

Manse

37,765
10
83
108

have a look at the jsfiddle it works for me - here is an explanation of attr vs data -> http://stackoverflow.com/questions/7261619/jquery-data-vs-attr – Manse Mar 14 '12 at 15:48
Downvote a 3 year old question without any explanation ?! – Manse Jul 03 '15 at 11:38

jQuery setting attribute on click does not change the value

2 Answers2