如何在 laravel 中提醒 data-id 属性值？答案

【问题标题】：How to alert the data-id attribute value in laravel?如何在 laravel 中提醒 data-id 属性值？
【发布时间】：2017-09-15 10:04:33
【问题描述】：

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 的类时传递该值。

AJAX2：

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

这是我尝试过的。但它不起作用。它不会发出警报或显示任何错误。

【问题讨论】：

标签： javascript php jquery ajax laravel-5.4

【解决方案1】：

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

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

【讨论】：

欢迎您。乐意效劳。你能接受我的回答吗？并投赞成票？
@nishanthi，当有任何使用 ajax、httpx 或 angularjs $http 请求动态创建的元素时，DOM 不会知道新附加的代码 sn-p。因此它不能对 DOM 不知道的元素执行 jquery，因为它是在页面呈现后创建的。在这种情况下，我们必须稍微改变一下语法，它称为 jquery 事件委托。这意味着，它将我们的 jquery 事件（如您的情况下的 click）绑定到新元素。请注意我在回答中所做的更改。
明白了..对我帮助很大。

【解决方案2】：

给你一个解决方案

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

由于元素是动态生成的，所以需要delegate events。

为了接收数据属性，您可以在您的场景中执行$(this).data("attribute-name");，它将是$(this).data('id');

希望这会对你有所帮助。

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

【讨论】：