如何告警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>

以粗体标记的代码具有 data-id 属性的值。我需要在单击名为 getDeviceCategoryName 的 class 时传递该值。

AJAX2:

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

这是我为此尝试过的一个..但它不是 working.It 不会发出警报或显示任何错误。

Answer 1

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

Answer 2

您应该考虑 jquery 事件委托：像这样更改 jquery 选择器行：

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

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

如何告警laravel中的data-id属性值？

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

javascript

php

ajax

jquery

laravel-5.4