javascriptでfor文内にsubmitボタン表示

Question

以下のコードで、jsonからのデータを表示しており、
if文に入れば、削除buttonを表示し、ボタンを押しているのですが、
以下の文が機能しません。

buttonの部分を#outputにした場合表示されますが、
URLを押した際にもalart表示がされて困っています。

$('button').on('click',function(){
alert('deliteをクリックしました！');

cakephp2.0のビューにて以下の部分で表示しています。

<div id="output">

$(document).ready(function(){
    $.ajax({
        type: "POST",
        url: '/cakephp/users/json_data',
        dataType: 'json',
        timeout: 10000})

    .done(function(data){
           for(var i in data.json_data){
    $("#output").append('<a href='+data.json_data[i].Tweet.name+'>'+data.json_data[i].Tweet.name+"</br>");
    $("#output").append(data.json_data[i].Tweet.tweet+"</br>");
    $("#output").append(data.json_data[i].Tweet.tweettime+"</br>");
    if(data.my_id==data.json_data[i].Tweet.name){
    $("#output").append('<button type="button" name="delite" id="delite" value='+data.json_data[i].Tweet.tweet_id+'>削除</button></br>');
     }
    $("#output").append("</br>");
 }
})
    .fail(function(){
            //通信失敗時の処理
            alert('通信失敗');

        });
    $('button').on('click',function(){
    alert('deliteをクリックしました！');
    });  
    });

jsonは以下の配列になっています。
{
my_id: "353",
json_data: [
{
Tweet: {
id: "24563",
tweet_id: "14",
name: "353",
tweet: "aaaaaaaaaaaa",
tweettime: "2016-10-21 03:40:17"
}
},

現在
ボタンが一番最初しか表示しかされない状況です。

Comments

[kei344]

「上手く実装できない」とは「何をしたときに」「どうなると思って」「どうなったのか」をお書きください。

[yambejp]

戻ってきたdataのサンプルがあると少しはフォローのしようもあるかと

[kei344]

if が無ければ動くのでしょうか。また、データがどのような構造になっているかも追記ください。

[popobot]

うまく動かないsubmitを書いたときのコードを記載してください。普通に<input type='submit'>と書いたらボタン出ましたよ...

[退会済みユーザー]

みんなよくみるんだ。　AJAX が終わる前に存在している buttonタグ にイベントを追加している

Answer 1

修正前

$('button').on('click',function(){
  alert('deliteをクリックしました！');
});  

修正後

$(document).on('click','button',function(){
  alert('deliteをクリックしました！');
});  

でいいはず