jquery - Get the data-url correctly using javascript function -
i creating delete comment function , pieces of html delete comment functionality.
<div id="comment-area"> <div class="list-border"> <small class="mdl-button delete-comment js-delete-comment pull-right" data-url="http://myproject.com/comment_controller/delete_comment/12/6"> x </small> </div> <div class="list-border"> <small class="mdl-button delete-comment js-delete-comment pull-right" data-url="http://myproject.com/comment_controller/delete_comment/13/6"> x </small> </div> </div>
and function delete comment, automatically loaded when document ready,
function delete_comment () { $('.delete-comment').click( function (e) { var url = $('.delete-comment').attr('data-url'); $.ajax({ url: url, type: 'get', datatype: 'json', success: function (data) { $('#comment-area').html(data.comments); delete_comment(); }, error: function () { alert('error'); } }); }); }
the problem function given html above, if i'm going click on .delete-comment
data-url="http://myproject.com/comment_controller/delete_comment/13/6"
take note on "13/6"
, javascript function delete_comment()
, in line
var url = $('.delete-comment').attr('data-url');
chose data-url="http://myproject.com/comment_controller/delete_comment/12/6"
take note "12/6"
, see difference, instead of data-url
of .delete-comment
clicked.
in short, function chose first-child div small
, whatever small.delete-comment
i'm going click.
what best solution this?
try
var url = $(this).attr('data-url');
you getting attribue value
classname
, multiple elements
have same class
attribute value
first element
found in dom
being returned.
so need value
of element
clicked
, can use this
value
of clicked element
.
Comments
Post a Comment