Hinzufügen einer Schaltfläche mit jQuery für eine vorhandene jQuery-Schaltfläche

Kann mir bitte jemand helfen/erklären, wie kann ich das tun oder wenn es möglich ist? Ich habe einen einfachen HTML-Code für eine Einkaufsliste:Hinzufügen einer Schaltfläche mit jQuery für eine vorhandene jQuery-Schaltfläche

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Let's buy...</title>   
     <link rel="stylesheet" href="css/normalize.css"> 
     <link rel="stylesheet" href="css/main.css"> 
    </head> 

    <body> 
     <h2 class="title">My grocery list<span id="counter"></span> </h2> 
     <ul id="list-items"></ul> 
     <div id="newItemButton"><button href="#" id="showForm">new item</button></div> 
     <form id="newItemForm"> 
      <input type="text" id="itemDescription" placeholder="Add item..."/> 
      <input type="submit" id="addButton" value="add" />  
     </form> 
     <script 
     src="https://code.jquery.com/jquery-3.2.1.min.js" 
     integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
     crossorigin="anonymous"></script> 
     <!-- <script type="text/javascript" 
     src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> --> 
     <script type="text/javascript" src="js/javascript.js"></script> 
    </body> 
</html>

Und ich bin der Benutzerelemente in die Liste erweitert - wenn der Benutzer ein Element hinzufügt, dass Artikel mit einem Knopf kommt. Jetzt möchte ich diese Schaltfläche "Element ändern", um 4 weitere Schaltflächen mit append() hinzuzufügen, und ich möchte, dass jede Schaltfläche, um die Farbe des Elements zu ändern, z. B. rot, grün, orange und grau - je nach Benutzervorliebe. Ich versuche, diese Schaltflächen hinzuzufügen, aber ich scheint es nicht hinzuzufügen, es erscheint nicht auf der Seite - nur um zu sagen - Ich habe versucht, nur eine Schaltfläche hinzuzufügen :). Hier ist meine jQuery-Code ...:

$(function() { 
 
    let $list, $newItemForm, $newItemButton; 
 
    let item = ''; 
 
    $list = $('ul'); 
 
    $newItemForm = $('#newItemForm'); 
 
    $newItemButton = $('#newItemButton'); 
 

 
    function updateCount() { 
 
     let items = $('li').length; 
 
     $('#counter').text(items); 
 
    } 
 
    updateCount(); 
 

 
    $newItemButton.show(); 
 
    $newItemForm.hide(); 
 
    $('#showForm').on('click', function() { 
 
     $newItemButton.hide(); 
 
     $newItemForm.show(); 
 
    }); 
 

 
    $newItemForm.on('submit', function(e) { 
 
     e.preventDefault(); 
 
     let text = $('input:text').val(); 
 
     $list.append('<li>' + text + '<button id="btn-change">change item</button><hr></li>'); 
 
     $('input:text').val(''); 
 
     updateCount();  
 
    });

und das ist die Schaltfläche Hinzufügen Prozess '=:

$('#btn-change').one('click', function() { 
 
      let b = $('<input/>').attr({ 
 
       type: "button", 
 
       id: "hot", 
 
       value: 'hot' 
 
      }); 
 
      $("button").append(b); 
 
     });

Quelle

2017-12-17 I Russu

Es gibt andere Dinge, die angesprochen werden müssen, wie mehrere Tasten, wie Sie instantia den Event-Handler und mehr. Um jedoch nur zu beantworten "warum erscheint meine neue Eingabe nicht".

Ein Schaltflächenelement sollte kein Eingabeelement enthalten. Sie können sehen, warum das keinen Sinn ergibt. Um also eine neue Eingabe vom Typ button zu erstellen und TO nicht anzuhängen, verwenden Sie .after. Nehmen wir nun an, dass die tatsächliche angeklickt ist, die wir anhängen wollen wir this und hängen unseren Button mit id btn-change

$('#btn-change').one('click', function() { 
    let b = $('<input/>').attr({ 
     type: "button", 
     id: "hot", 
     value: 'hot' 
    }); 
    $(this).after(b); 
});

Hier ist eine weitere Option, einfach mit einer anderen Methode, die die gleiche Funktion ausführt, verwenden können, tut das gleiche, aber vielleicht macht der Name die Absicht klarer.

$('#btn-change').one('click', function() { 
    let b = $('<input/>').attr({ 
     type: "button", 
     id: "hot", 
     value: 'hot' 
    }); 
    b.insertAfter(this); 
});

Jetzt können wir eine Schaltfläche hinzufügen, beobachten wir, dass wir auf diese Schaltfläche, wir klicken dynamisch hinzugefügt, so müssen wir unsere Event-Handler als auch dynamisch sein lassen, das ist es für den Knopf an einem Behälter befestigen .

list-items ist unser Container, also hängen wir daran.

$('#list-items').one('click', '#btn-change',function() { 
    let b = $('<input/>').attr({ 
     type: "button", 
     id: "hot", 
     value: 'hot' 
    }); 
    b.insertAfter(this); 
});

Jetzt, wo wir unsere Event-Handler haben wir auch beachten, dass die Duplikat-ID nicht gültig ist, so dass wir eine Klasse anstelle einer ID zu verwenden, ändern zu.

$('#list-items').one('click', '.btn-change',function() { 
    let b = $('<input/>').attr({ 
     type: "button", 
     class: "hot", 
     value: 'hot' 
    }); 
    b.insertAfter(this); 
});

Nachdem wir nun aus dem Weg eine Erklärung haben, mit einer Lösung

$(function() { 
 
    let $list, $newItemForm, $newItemButton; 
 
    let item = ''; 
 
    $list = $('#list-items'); // use faster id 
 
    $newItemForm = $('#newItemForm'); 
 
    $newItemButton = $('#newItemButton'); 
 

 
    function updateCount() { 
 
    let items = $list.find('li').length; // get inside our list 
 
    $('#counter').text(items); 
 
    } 
 
    updateCount(); 
 

 
    $newItemButton.show(); 
 
    $newItemForm.hide(); 
 
    $newItemButton.on('click', function() { 
 
    $newItemButton.hide(); 
 
    $newItemForm.show(); 
 
    }); 
 

 
    function addButton(place, b) { 
 
    let bt = $('<input/>').attr({ 
 
     type: "button", 
 
     class: b + "button colorbutton", 
 
     value: b 
 
    }).data("colorclass", b + "thing"); 
 
    bt.insertAfter(place); 
 
    } 
 
    // perhaps change to button type not submit type? 
 
    $newItemForm.on('submit', function(e) { 
 
    e.preventDefault(); 
 
    let text = $('#itemDescription').val(); // use fast id 
 
    text = text=""?"new":text;//avoid empty text 
 
    $list.append('<li><span class="desc">' + text + '</span><button type="button" class="btn-change">change item</button><hr></li>'); 
 
    $('#itemDescription').val(''); 
 
    updateCount(); 
 
    }); 
 
    $('#list-items').on('click', '.colorbutton', function() { 
 
    $(this).parent().find('.desc') 
 
    .removeClass("hotthing greenthing orangething greything") 
 
    .addClass($(this).data("colorclass")); 
 
    }); 
 
    //Note the change here from discussion, still adds the buttons but more modular, disables button to avoid second click vs the .one, works for new items 
 
    $('#list-items').on('click', '.btn-change', function() { 
 
    $(this).prop("disabled", true); // only add once so disable it 
 
    // add the color buttons, matches classes in css 
 
    addButton(this, "hot"); 
 
    addButton(this, "green"); 
 
    addButton(this, "orange"); 
 
    addButton(this, "grey"); 
 
    }); 
 
});

.hotbutton { 
 
    color: red; 
 
} 
 

 
.greenbutton { 
 
    color: green; 
 
} 
 

 
.orangebutton { 
 
    color: orange; 
 
} 
 

 
.greybutton { 
 
    color: grey; 
 
} 
 

 
.hotthing { 
 
    background-color: red; 
 
} 
 

 
.greenthing { 
 
    background-color: green; 
 
} 
 

 
.orangething { 
 
    background-color: orange; 
 
} 
 

 
.greything { 
 
    background-color: grey; 
 
} 
 

 
#list-items { 
 
    border: solid lime 1px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<body> 
 
    <h2 class="title">My grocery list<span id="counter"></span> </h2> 
 
    <ul id="list-items"></ul> 
 
    <div id="newItemButton"><button type="button" id="showForm">new item</button></div> 
 
    <form id="newItemForm"> 
 
    <input type="text" id="itemDescription" placeholder="Add item..." /> 
 
    <input type="submit" id="addButton" value="add" /> 
 
    </form> 
 
</body>

Quelle

2017-12-17 14:08:20

Das Problem, dass Sie es zu tun kann, ist, dass Sie versuchen, ein Ereignis ausgelöst von einem dynamisch generierten Element. Das Element # btn-change wurde beim Anhängen des Ereignisses nicht in die Seite geladen. Basierend auf der documentation können Sie einen Selektor hinzufügen. Sie müssen das Ereignis in ein stabiles Element Ihrer Seite e einfügen.g ul # list-Artikel

so Ihr Code wie dies

$("ul#list-items").one('click','#btn-change', function() { 
     let b = $('<input/>').attr({ 
      type: "button", 
      id: "hot", 
      value: 'hot' 
     }); 
     $("button").append(b); 
});

aussehen würde Oder Sie könnten das Ereignis grammatisch befestigen.

Auch ich würde vorschlagen, dass Sie Klassen statt ID für Elemente verwenden, die mehrere Male auf derselben Seite existieren würden (z. B. die <button id='btn-change'></button>) die ID muss eindeutig auf Ihrer Seite sein.

So ist der Code, den ich vorschlagen würde aussehen würde dies

$newItemForm.on('submit', function(e) { 
    e.preventDefault(); 
    let text = $('input:text').val(); 
    $list.append('<li>' + text + '<button class="btn-change">change item</button><hr></li>'); 
     $('input:text').val(''); 
     updateCount();  
});

die id='btn-change'-class='btn-change' geändert

und der Code der BTN-Änderung Click-Ereignis

$('ul#list-items').one('click','.btn-change', function() { 
    let btnContainer = $("<div></div>").css("display","inline-block").attr({ 
     class: "btn-container" 
    }); 

    btnContainer.append(
     $('<input/>').attr({ 
      type: "button", 
      class: "hot", //use class instead of id in case you generate more than 1 element 
      value: 'hot' 
     }) 
    ).append(
     $('<input/>').attr({ 
      type: "button", 
      class: "green", //use class instead of id in case you generate more than 1 element 
      value: 'green' 
     }) 
    ).append(
     $('<input/>').attr({ 
      type: "button", 
      class: "grey", //use class instead of id in case you generate more than 1 elements 
      value: 'grey' 
     }) 
    ).append(
     $('<input/>').attr({ 
      type: "button", 
      class: "orange", //use class instead of id in case you generate more than 1 element 
      value: 'orange' 
     }) 
    ); 

    btnContainer.insertBefore(this); 
    $(this).hide();//or remove based on what you want to achieve 

});

hier I verwende den .btn-change als Selektor und ich erstelle ein Containerelement, um die vier zu halten Knöpfe dann füge ich den Behälter von vier Knöpfen vor der .btn-Änderung Knopf hinzu und verberge den Knopf.

Sie können später den Teil des Codes hinzufügen, der den Container der vier Schaltflächen löscht/ausblendet und die Schaltfläche .btn-change

anzeigt

Quelle

2017-12-17 14:09:56 knetsi

Hinzufügen einer Schaltfläche mit jQuery für eine vorhandene jQuery-Schaltfläche

Antwort

Verwandte Themen