作成方法クリック可能

<td>にSPARQLクエリ結果を表示するテーブルを作成しましたが、結果は表示されますが、<td>（結果）をクリックするとメッセージボックスが表示されます。今は特別な<td>が上部に表示され、その特定のものに対してのみ動作します。何も実際の結果<td>をクリックしたときに発生するようだ：作成方法クリック可能

マイコード：

<table id="results"> 
    <td class="td" onclick="myFunction()"></td> 
    </table> 
    <body> 
     <script type="text/javascript"> 
     PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>   
PREFIX type: <http://dbpedia.org/class/yago/> 
PREFIX prop: <http://dbpedia.org/property/> 
SELECT ?country_name 
WHERE { 
    ?country rdf:type type:Country108544813. 
    ?country rdfs:label ?country_name. 

} 
       "Limit 1" 
       ].join(" "); 

       alert("this query: [" + query + "]"); 

       var queryUrl = url + "?query=" + encodeURIComponent(query) + "&format=json"; 




</body>

、私はまだそれのまわりで私の頭を取得して、オンライン材料からそれを得たJavaScriptコード、それの主な用途は、クエリ結果を表示します。あなたは動的インクルードは何クラスではありませんかonclickを追加すると、静的

<table id="results"> 
<td class="td" onclick="myFunction()"></td> 
</table>

上のクリックイベントを持っているあなただけにシームあなたのコードを見ている間そうそう答えは本当に感謝していると感謝読み取り:)

出典

2016-12-16 Jesse Lin

アクティブにしたいイベントにclickイベントを追加することができます – happymacarts

あなたのajaxから返されたレンダリングされたhtmlを投稿できます – happymacarts

したがって、最初のオフ、あなたのHTMLは少しオフで、それはそれの内側にあるべきとき...あなたのテーブルには、タグの外側にある：（TDの点に注意してください。通常でだろうあまりにも）

<body> 
    <table id="results"> 
     <tr><td class="td" onclick="myFunction()"></td></tr> 
    </table> 
    <script type="text/javascript"> 
    ....

しかし、もっと正確には、あなたの質問に：あなたはのセルを作成し、それだけ、それにonclickのイベントハンドラを添付しています。あなたが実際につかんだjavascriptコードは、新しい行とセルをテーブルに追加し、onclickハンドラが割り当てられていません。

だから私は、代わりにこのような何か試してみた：「魔法」のラインが甘い部分です

<script type="text/javascript"> 
     var table = $("#results"); 
     table.on("click", "td", myFunction); // <-- magic! 
     var url = "http://dbpedia.org/sparql";

を：それは全体テーブルの上にハンドラをアタッチしますが、「TDでイベントをフィルタセレクター。

次に、最初のtdを設定する必要はありません。次に、テーブルの上端で空白でクリック可能なものを設定する必要はありません。あなたのページの表：

<body> 
    <table id="results"></table> 
    <script type="text/javascript"> 
    ....

希望します。

出典

2016-12-16 21:28:06 MacPrawn

答えをありがとう、それは完全に働いた:) –

用イベント。これを修正するには、onclickをtdに動的に追加するか、またはそのテーブルのすべてのtdsに同じクリックイベントを設定するスクリプトを実行します。

function getTableCell(fieldName, rowData) { 
      //var td = $("<td></td>"); 
       var td = $("<td class="td" onclick="myFunction()"></td>"); 
      var fieldData = rowData[fieldName]; 
      //alert("fieldName = ["+fieldName +"] rowData[fieldName][value] = ["+rowData[fieldName]["value"] + "]"); 
      td.html(fieldData["value"]); 
      return td; 
     }

または

$("#results td").click(function(){ 
    var x; 
    if (confirm("Press a button!") == true) { 
     x = "You pressed OK!"; 
    } else { 
     x = "You pressed Cancel!"; 
    } 
}

出典

2016-12-16 21:25:29 Wesley

なぜクリックイベントハンドラは静的な要素から委譲されますか？結果 '？動的要素を追加しても、毎回バインディングを再追加する必要はありません。私は '$（"＃results "）on（" click "、" td "、function（）{some code}）と思うだろう; –

あなたはそれを聞くことはできませんでした。彼はテーブル内の任意のtd要素をクリックできるようにしたかったのです。彼がすべてのTD要素をクリックしたい場合、 – Wesley

Gotcha、はい - 私のコメントを更新しました、キャッチのためにありがとう！ –

作成方法​​クリック可能

答えて

関連する問題