So fügen Sie unabhängige Schaltflächen am Ende jeder Datenzeile in Jquery hinzu

Question

So bekomme ich Daten von einem Back-End über eine AJAX GET-Methode, und präsentiert es in einer Liste (unten) in HTML. Ich habe versucht, das Button-Tag dort zu setzen, und ich bekomme die Knöpfe auf der Liste, aber ich bin nicht sicher, wie man den Delegierten und andere verwendet, um es zu arbeiten.

Also wie kann ich unabhängige Schaltflächen setzen, die die Benutzer auf eine Detailseite über die Cafeteria in dieser Liste senden? (Dies ist nur ein persönliches Projekt)

$(function(){ 

    var $cafeterias = $('#cafeterias'); 
    var $Name = $('#CName'); 
    var $Location = $('#CLocation'); 


    function DispCafeteria(cafeteria) { 
     $cafeterias.append('<li> Name: '+cafeteria.Name+'Location: '+cafeteria.Location+'<button id="Details">Details</button>'+'</li>'); 
    } 

    $.ajax({ 
     type: 'GET', 
     url: 'some url', 
     success: function (cafeterias) { 
       $.each (cafeterias, function (i, cafeteria){ 
       DispCafeteria(cafeteria); 
       }); 
     }, 
     error: function() { 
      alert('Error while loading cafeterias'); 
     } 

     }); 
}); 

Answer 1

Ein paar nit Pick:

• Nicht Funktionen Name mit einem der führenden Großbuchstaben, es sei denn Ihre Planung es (Konstruktorfunktion) zu instanziiert. Es verwirrt die Menschen, da dies der gemeinsame De-facto-Standard ist.
• Vermeiden Sie verschachtelte Callback-Logik. Verwenden Sie stattdessen eine Promise-Schnittstelle. (jQuery hat eins).
• Konstruieren Sie keine interaktiven DOM-Elemente mit HTML-Zeichenfolgen. Es ist schwierig, Ereignisse anzuhängen. Eine Ausnahme ist die Ereignisdelegierung, die in Ihrem Beispiel eine bessere performante Methode ist.

Sie sollten Ihr Problem Raum brechen. Trennen Sie Bedenken in kleinere Stücke.

Fetch AJAX Daten:

function fetchData() { 
    return $.ajax({ 
    type: 'GET', 
    url: 'some url' 
    }); 
} 

Handle Fehler:

function handleErrors(err) { 
    alert('Error while loading cafeterias'); 
} 

Konstruieren Sie die DOM:

function cafeteriaToString(cafeteria) { 
    return 'Name: ' + cafeteria.name + 
    ' Location: ' + cafeteria.location; 
} 

function constructDataTable(cafeterias) { 
    $.each(cafeterias, function (i, cafeteria) { 
    var $button = $('<button/>') 
     .text('Details') 
     .data('details-id', i); 
    $('<li/>') 
     .text(cafeteriaToString(cafeteria)) 
     .append($button); 
    }); 
} 

einen delegierten Ereignis anhängen:

function handleButtonClicks(e) { 
    var detailsId = $(this).data('details-id'); 
    // Do something with detailsId 
} 

Dass sie alle zusammen:

function init() { 
    fetchData() 
    .then(constructDataTable) 
    .fail(handleErrors); 

    $('ul').on('click', 'li>button', handleButtonClicks); 
}