Dynamic button event getting undefined id message on Jquery

Question

I am trying to creat dynamic buttons and click event. Creating dynamic button is working but when I cliked it I am getting undefined message. What is my wrong? Sorry my lang. Thx in advance. My code is below:

$(function(){
   var i = 1;

$('button').on('click',function(){
      var r= $('<input type="button" class="dinamik" value="new button '+ i +' "/>');
      $("body").append(r);
      i++;
   });
});

    $(function(){
        $(document).on('click', '.dinamik', function(){
           var valueDeger = $(this).find('.dinamik').attr('value');
           alert("Value değeri: " + valueDeger);
    });
});

Demo is here.

You have to delegate click event for `.dynamic` element. Search for one of the thousand hundreds duplicate... — A. Wolff, Jan 05 '15 at 11:31
@Rory McCrossan: The problem was unrelated to the title, so was not a duplicate of those answers. it was simply misuse of `this`. — iCollect.it Ltd, Jan 05 '15 at 11:36

score 1 · Answer 1 · edited May 23 '17 at 11:51

1

Inside the click event handler, this referes to the button itself, there is no need to use find method:

$(function(){
    $(document).on('click', '.dinamik', function(){
       var valueDeger = $(this).attr('value');
       alert("Value değeri: " + valueDeger);
    });
});

JSFiddle Demo.

Using val() method instead of attr('value') is recommended, see this Stack Overflow question.

edited May 23 '17 at 11:51

Community

1
1

answered Jan 05 '15 at 11:30

dashtinejad

6,193
4
28
44

At last an actual explanation +1 :) – iCollect.it Ltd Jan 05 '15 at 11:34
`val()` is preferable to `attr()` for value properties. Sometimes you need to go beyond the initial bug and encourage good practices :) – iCollect.it Ltd Jan 05 '15 at 11:35
1

@TrueBlueAussie I've add it to the answer as a side note `:)`. – dashtinejad Jan 05 '15 at 11:37

Jai · Answer 2 · 2015-01-05T11:37:47.440

1

change this:

var valueDeger = $(this).find('.dinamik').attr('value');

to this:

var valueDeger = $(this).val(); // or this.value;

The issue is $(this) refers to the clicked element which is your input[type="button"] and you are trying to find the .find('.dinamik') in it, which is not there, so that's why it is undefined.

edited Jan 05 '15 at 11:37

answered Jan 05 '15 at 11:30

Jai

74,255
12
74
103

score 1 · Answer 3 · answered Jan 05 '15 at 11:32

1

Demo

Try this one

$(function(){
    var i = 1;
    $('button').on('click',function(){
        var r= $('<input type="button" class="dinamik" value="new button '+ i +' "/>');
        $("body").append(r);
        i++;
    });
});

$(function(){
    $(document).on('click','.dinamik', function(){
        var valueDeger = $(this).val();
        alert("Value değeri: " + valueDeger);
    });
});

answered Jan 05 '15 at 11:32

SimarjeetSingh Panghlia

2,200
13
14

1

`val()` is preferable to `attr()` for value properties. Sometimes you need to go beyond the initial bug and encourage good practices :) – iCollect.it Ltd Jan 05 '15 at 11:33
yes u are write, thank u @TrueBlueAussie – SimarjeetSingh Panghlia Jan 05 '15 at 11:36

score 0 · Answer 4 · answered Jan 05 '15 at 11:31

0

Change from

var valueDeger = $(this).find('.dinamik').attr('value');

To

var valueDeger = $(this).val();

answered Jan 05 '15 at 11:31

Sadikhasan

18,365
21
80
122

When I post at that time your answer is not present that's why I posted – Sadikhasan Jan 05 '15 at 11:45

Dynamic button event getting undefined id message on Jquery

4 Answers4