如何提醒laravel中的data-id属性值？

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> 

其中被标记为粗体的代码对数据ID attribute..And我需要单击名为getDeviceCategoryName类时，通过该值的价值。

AJAX2：

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

这是一个我试图为that..But它不是working.It亘古不变的警报或显示任何错误。

Answer 1

你应该考虑jQuery的事件代表团： 改变你的jQuery选择线路是这样的：

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

Answer 2

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

Answer 3

在这里，你有一个解决方案

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

去因为元素是动态生成的，所以你需要delegate events。

对于接收的数据属性你可以在你的情况做$(this).data("attribute-name");这将是$(this).data('id');

希望这会帮助你。

Answer 4

就我个人而言，如果点击事件在创建后立即应用于元素，代码效率会更高。

$(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); 
      }); 
     ); 
     }); 
     } 
    }); 
    }); 
});