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

AJAX2：

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

这是我试过的那个..但是它没有工作。它不会发出警告或显示任何错误。

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属性值？

4 个答案: