jQueryで既存のjQueryボタンのボタンを追加

誰かが私に手伝ってもらえますか？私は食料品のリストについては、単純なHTMLコードを持っている：jQueryで既存のjQueryボタンのボタンを追加

<!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>

をそして私は、ユーザーがリストに要素を追加しています - ユーザーが項目を追加する場合、その項目はボタンが付いています。今度は、そのボタンに "append（）"を加えた4つのボタンを追加するボタンを "アイテムを変更"し、ユーザの好みに応じて、赤、緑、オレンジ、グレーのようなアイテムの色を変更するためにクリックします。私はそれらのボタンを追加しようとしていますが、私はそれを追加していないようです、それはページに表示されません - ちょうど言って - 私はただ一つのボタンを追加しようとしました:)。

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

、これは= 'プロセスを追加するボタン' です： ...ここに私のjQueryコードである

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

が

出典

2017-12-17 I Russu

他があります複数のボタンのように対処する必要があるもの、インスタント・イニシアチブイベントハンドラなどがあります。しかし、あなたの "なぜ私の新しい入力は表示されません"と答えるだけです。

ボタン要素には要素を入れてはいけません。なぜそれが意味をなさないのか分かります。したがって、その後にタイプボタンの新しい入力を作成し、そのようにTOを追加しない場合は、.afterを使用してください。今をクリックし、実際には、我々は我々がthisを使用するとidここbtn-change

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

で私たちのボタンに追加することができますに追加したいものは、単に同じ機能を実行する別の方法を使用して別のオプションは、ないですされていることを前提とし同じことだが、おそらく名前が意図をより明確にする。

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

今、私たちはボタンを追加することができ、我々はこのように私たちは、ボタンのコンテナに添付されている、私たちのイベントハンドラが同様に動的にできるようにする必要があり、我々は我々が動的にクリックされ、このボタンを追加したことを観察します。

list-itemsは私たちのコンテナですので、それに添付します。

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

は今、私たちは私たちのイベントハンドラを持っていることを、我々はまた、我々は代わりにIdのクラスを使用するように変更しますので、重複したIDが有効ではないことに注意してください。

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

今、私たちは道の外にいくつかの説明を持っていることを、あなたが扱っている問題は、あなたがイベントを発生しようということであるソリューション

$(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>

出典

2017-12-17 14:08:20

を行うことができます動的に生成された要素から取得します。イベントを添付したときに＃btn-change要素がページに読み込まれませんでした。 documentationに基づいてセレクタを追加することができます。あなたはあなたのページの安定した要素にイベントを添付しなければなりません。グラムUL＃リスト - 項目

ので、あなたのコードが

このような

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

を見てしまうそれとも、文法的にイベントを添付することができます。

また、同じページに複数回存在する要素（たとえば、<button id='btn-change'></button>）にidの代わりにクラスを使用することをお勧めします。このIDは、ページ内で一意である必要があります。

だから私は示唆しているコードは

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

がclass='btn-change'

にid='btn-change'を変更し、

$('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 

});

ここで私BTN-変更クリックイベントのコードを次のようになります.btn-changeをセレクタとして使用しています。これを保持するコンテナ要素を作成していますボタンをクリックして、.btn-changeボタンの前に4つのボタンのコンテナを追加し、ボタンを非表示にします。

4つのボタンのコンテナを削除/非表示にし、.btn-changeボタンを表示する部分を後で追加することができます

出典

2017-12-17 14:09:56 knetsi

jQueryで既存のjQueryボタンのボタンを追加

答えて

関連する問題