Get attr when call function inside html

Question

I have function:

 function delMeh() {
                console.log('prolazi klik');
var did = $(this).attr('data-value');
$.ajax({
            url: "delTmeh.php",
            type: "POST",
            async: true, 
            data: { vrednostid:did}, //your form data to post goes here as a json object
            dataType: "html",
            success: function(data) {
            $('#tablemeh').dataTable().fnDestroy();
        drawMeh();   
            },
             error: function(data) {
             console.log(data);
             }
        });
}

and HTML:

<i data-value="32" onclick="delMeh();" class="fa fa-times delMeh"></i>

SO, on click I need to delete row 32 from database, but how I can get data-value of clicked element... I try with:var did = $(this).attr('data-value'); inside delMeh() function but dont work.

How to get attr data-value of clicked element when call function like I need to do?

`onclick="delMeh(this);"`. Then it will work when you set an argument to function `delMeh`. However using inline events is highly discouraged. — Mouser, Feb 07 '15 at 12:59
ok, but I need to use it inline becouse I create html dinamicly and .on click and similar events dont work for me — dert detg, Feb 07 '15 at 13:03

score 2 · Answer 1 · answered Feb 07 '15 at 13:04

Why do u need the data value, when using a inline function click? You could directly pass the value as a parameter to the function.

    
    function delMeh(value) {
        // do your stuff
      }

    <i onclick="delMeh(32);" class="fa fa-times delMeh"></i>

This would work good, but I seriously doubt the usage of this in a inline function call, as it could be used when a element's event is binded using jquery event listener.

Then you can use $(this).data('value')

I hope this helps.

score 1 · Answer 2 · edited May 23 '17 at 12:31

Send the element on the onclick method

onclick="delMeh(this);"

and receive the element on your function

function delMeh(element) {

      // than you can get the value with
      var did = $(element).attr('data-value');
      // or
      var did = $(element).data('value');

}

Or you could do it the jQuery way, by binding the on click handler on your html elements like this:

$(".delMeh").click(function() {
    // here you could use this
    var did = $(this).attr('data-value');
});

where you won't need to set the inline onclick attribute on each element.

Check this question to understand the difference between .attr vs. .data.

score 1 · Answer 3 · answered Feb 07 '15 at 13:03

1

function delMeh() {
   console.log('prolazi klik');
   var did = $(this).attr('data-value');
   alert(did);
}

$(".delMeh.fa.fa-times").click(delMeh);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<i data-value="32" class="fa fa-times delMeh">test</i>

This uses the more standard addEventListener. AddEventListener allows for multiple events of the same type and passes the this argument to the function. It also prevents the overwriting of the inline events.

answered Feb 07 '15 at 13:03

Mouser

13,132
3
28
54

I will try... so this is better than inline function call ? Why? – dert detg Feb 07 '15 at 13:08
@dertdetg prevents overwriting by other (external) sources. Eg. you load a jQuery plugin that sets an inline onclick handler on all your italic elements, then your own click handler get's overwritten. With `addEventListener` or jQuery's event handlers you prevent this. Also these event setters pass a reference to the function of the element that owns the event (ergo the `this` keyword). – Mouser Feb 07 '15 at 13:11
Not work, this code just call my function delMeh() ajax non-stop, and dont stoped – dert detg Feb 07 '15 at 13:12
How is it invoked then? – Mouser Feb 07 '15 at 13:14
The code works fine. You can trust me. It's about the implementation. Can I take a look at the full code somehow? – Mouser Feb 07 '15 at 13:20
@dertdetg There is a loop. You call `drawMeh` inside the Ajax call and `drawMeh` calls `delMeh` – Mouser Feb 07 '15 at 13:32
yes, I solve this problem, But now I cant put $(".delMeh").click(delMeh); on right place, I cant run it, ... Where I need to put this? I was try to put into document ready but dont work – dert detg Feb 07 '15 at 13:35
You need to put this on the place where you know the datatable is done rendering and all delete row buttons are created. – Mouser Feb 07 '15 at 14:27

score 0 · Answer 4 · answered Feb 18 '15 at 16:38

You really should avoid using inline event handlers with jQuery as others mention. The reason include getting new jQuery bubbling functionality and not separating the event registration code from the event handling code.

It sounds like your elements are created dynamically, which is probably why your previous attempt at using .on failed (mentioned in your comments). That also means none of the other suggestions will work as-is.

Instead use a single delegated event handler, attached to a non-changing ancestor element. document is the default if nothing else is closer/convenient. In your case the better element might be $('#tablemeh').on(..., but I would need to see a sample of your page's HTML.

A delegated event handler listens for the event (in this case click) to bubble up to the element, then it applies the jQuery selector. Then it calls your function only on the matching elements that caused the event. That means the elements only have to exist/match at event time.

Also, use data as a short-cut to fetch attributes with a data- prefix.

So instead of your existing code, just use something like this:

 $(document).on('click', '.delMeh', function(){
      var did = $(this).data('value');
      $.ajax({
        url: "delTmeh.php",
        type: "POST",
        async: true, 
        data: { vrednostid: did },
        dataType: "html",
        success: function(data) {
        $('#tablemeh').dataTable().fnDestroy();
    drawMeh();   
        },
         error: function(data) {
         console.log(data);
         }
    });
 });

Get attr when call function inside html

4 Answers4