javascriptボタンが表示されません

Question

ボタンが動作している状態でスタックしています。これは、javascriptでのみ作成されたボタンです。サイトは種類のデータ（JSONファイル）なので、スタッフがいます。誰かが検索をしようとすると、たとえばロンドンにある派遣社員を検索し、24K以上の給与をクリックします。ボタンをクリックすると、スタッフ全員この検索に関連するものは次々に表示されます。

for(var i in data.staff){ 
    if((branchType == data.staff[i].type) || (branchType == "Any")) { 
     output += "<p>" + data.staff[i].type + " $" + data.staff[i].salary +"</p>" + "<a href=" + data.staff[i].url + "><p> 
<img src=" + data.staff[i].picture + "></a>" + data.staff[i].description + 
("button") + "</p>"; 
    } 
} 

私はボタンが検索によってソートされたすべてのスタッフの後に提示することにしたいので、私は本当にHTMLでそれを実装することはできませんか？ これは私が持っているものです。

 function createButton(context, func){ 
      var button = document.createElement("input"); 
      button.type = "button"; 
      button.value = "im a button"; 
      button.onclick = func; 
      output.appendChild(button); 
     } 
    button.addEventListener("click",function(){ 
alert("did something"); 
}); 

しかし、それは実際に動作しません。私はページに何が印刷されるのですか？ボタン 何か考えていますか？

Answer 1

質問タグにjqueryがあることがわかりましたので、私はあなたがそれを使いたいと思います。

以下のコードは各スタッフの後にボタンを追加しています。

各ボタンにはオンイベントがあります。

ボタンをクリックすると、メッセージで警告が表示されます：何かをしてください。

$(document).ready(function(){ 
    $('body').on('click','input.staff-button',function() { 
     alert('do something'); 
    }); 

    var output = ''; 
    for (var i in data.staff) { 
     if ((branchType === data.staff[i].type) || (branchType === "Any")) { 
      output += '<div class="staff-item-'+i+'">'; 
      output += '<p>' + data.staff[i].type + ' $' + data.staff[i].salary +'</p>'; 
      output += '<p><a href="' + data.staff[i].url + '"><img src="' + data.staff[i].picture + '"></a></p>'; 
      output += '<p>' + data.staff[i].description + '</p>'; 
      output += '<p><input type="button" id="staff-'+i.toString()+'" class="staff-button" /></p>'; 
      output += '</div>'; 
     } 
    } 
    $('body').append(output); 
}); 

このヘルプが必要です。

Answer 2

いくつかのエラーがあるので、コードは完全ではないと思います。 例：関数内で定義されていない

出力

button.addEventListenerボタン範囲外

しかし、あなたはこのような何かを必要とし、リスト内のすべての行のためにそれを呼び出す：

function createButton(parentDomElement, func) 
{ 
    var button = document.createElement("input"); 
    button.type = "button"; 
    button.value = "im a button"; 
    button.onclick = func; 
    parentDomElement.appendChild(button); 
} 

とあなた「レンダリング」ループは、DOM要素を作成してボタン機能を呼び出す必要があります。

for(var i in data.staff) 
{ 
    if((branchType == data.staff[i].type) || (branchType == "Any")) 
    { 
     // Create paragraph DOM element and set content to your data and the call 
     // createButton(domElement, func); 
    } 
}