How to alert the data-id attribute value in laravel?

Question

Ajax1:

<script type="text/javascript">
$(document).ready(function () {
    $('.CategoryName').click(function() {
        var categoryName = $(this).attr("data-id"); 
        var url="{{url('getSubCategoryName/').'/'}}" + categoryName;
        $.ajax({
            url : url,
            type: 'GET',
            dataType:'json',
            success:function(data){
                $.each(data, function( index, value ) {
                    var output = '';
                    output = ' ' + value.subCategoryName + '';
                    **$(".subcategory").append('<ul><li data-
                    id="'+value.subCategoryName+'" class="getDeviceCategoryName">'+value.subCategoryName+'</li></ul>')**
                });
            }
        });
    });
});  
</script>

The code which is marked in bold has the value for data-id attribute..And I need to pass that value when class named getDeviceCategoryName is clicked.

AJAX2:

<script type="text/javascript">
$(document).ready(function () {
    $('.getDeviceCategoryName').click(function() {
        var subCategoryName = $(this).attr("data-id"); 
        alert(subCategoryName); 
    });
});  
</script>

This is one I tried for that..But its not working.It doesnot alerts or shows any error.

Answer 1

$(document).ready(function () {
        $(document).on('click', '.getDeviceCategoryName', function(){
        var subCategoryName = $(this).attr("data-id"); 
        alert(subCategoryName); 
    });
});  

Answer 2

You should consider jquery event delegation: Change your jquery selector line like this:

<script type="text/javascript">
$(document).ready(function () {
    $(document).on('click','.getDeviceCategoryName',function() {
        var subCategoryName = $(this).attr("data-id"); 
        alert(subCategoryName); 
    });
});  
</script>

Answer 3

Here you go with a solution

$(document).ready(function () {
  $(document).on('click', 'li.getDeviceCategoryName', function() {
    console.log($(this).data("id")); 
  });
});  

Since the elements are generated dynamically, so you need to delegate events .

For receiving the data-attribute you can do $(this).data("attribute-name"); in your scenario it will be $(this).data('id');

Hope this will help you.

Answer 4

Personally I think code is more efficient if the click event is applied to the element right after it's created.

$(function () {
  $('.CategoryName').click(function () {
    var categoryName = $(this).attr('data-id');
    var url = '{{url(\'getSubCategoryName/\').\'/\'}}' + categoryName;
    $.ajax({
      url: url,
      type: 'GET',
      dataType: 'json',
      success: function (data) {
        $.each(data, function (index, value) {
          var output = '';
          output = ' ' + value.subCategoryName + '';
          $('.subcategory').append($('<ul/>').append('<li data-id="' + value.subCategoryName + '" class="getDeviceCategoryName">' + value.subCategoryName + '</li>')
                                   .find('li')
                                   .click(function () {
                                    var subCategoryName = $(this).attr('data-id');
                                    alert(subCategoryName);
          });
          );
        });
      }
    });
  });
});