Wie alarmiert man den Data-ID-Attributwert 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> 

Der Code, der in fett markiert den Wert für die Datennummer attribute..And Ich brauche diesen Wert zu übergeben, wenn Klasse mit dem Namen getDeviceCategoryName geklickt wird.

AJAX2:

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

Dies ist ein I für that..But versucht, seine keine Warnungen working.It doesnot oder zeigt einen Fehler.

Answer 1

sollten Sie jquery Ereignis Delegation betrachten: Ihre jquery Auswahlleitung wie folgt ändern:

<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

Hier können Sie mit einer Lösung

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

gehen Da die Elemente dynamisch erzeugt werden, so müssen Sie delegate events.

Für die Daten Attribut Empfangen Sie $(this).data("attribute-name"); in Ihrem Szenario tun können, wird es $(this).data('id');

Hoffnung, dies wird Ihnen helfen.

Answer 4

Persönlich denke ich, dass Code effizienter ist, wenn das click -Ereignis direkt nach der Erstellung auf das Element angewendet wird.

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