jQuery：ページがロードされるときにonclickに関数をフックしようとしています

Question

私は同様の質問HEREを見たことがありますが、それを試してみることはできません。 テーブル行を動的に生成するためのコードを示します。

for (var contribution = 0; contribution < candidate.contributions.length - 1; contribution++) { 
    var id = candidate.contributions[contribution].donor_id; 
    var uid = candidate.contributions[contribution].user_id; 

    $("#history-table").append(
     "<tr onclick='" + parent.viewEngine.pageChange('public-profile', 1, id, uid) + ";>" + 
     "<td class='img-cell'>" + 
     "<img class='profile-avatar-small' src='/uploads/profile-pictures/" + 
     candidate.contributions[contribution].image + "' alt='' /></td><td class=''>" + 
     "<h2>" + candidate.contributions[contribution].firstname + 
     " " + candidate.contributions[contribution].lastname + "</h2></a><br/><br/>" + 
     "<span class='contribution-description'>" + candidate.contributions[contribution].contribution_description + "</span></td>" + 
     "<td><h3>$" + formatCurrency(candidate.contributions[contribution].contribution_amount) + "</h3></td></tr>"); 
} 

これはまだ望ましい動作ではありませんページのロード、とすぐにクリックイベントを実行します。クリックイベントを実行するにはtrをクリックできる必要があります。

Answer 1

（私は本当にとにかくあなたは既にjQueryのを使用している場合は特に、そのようなインラインのイベントハンドラを使用することをお勧めしますが、しません...）

問題は、あなたが最後に関数の名前を必要とするということですあなたが.append()に渡す文字列に追加しますが、関数を呼び出して結果を追加するだけです。これを試してみてください：

... 
"<tr onclick='parent.viewEngine.pageChange(\"public-profile\", 1, " + id + "," + uid + ");'>" + 
... 

これは、関数の名前とパラメータの最初のカップルが含まれた文字列を作成しますが、その後、完全な文字列が含まれていることを、このような電流ループの反復からidとuid変数の値を追加します適切にフォーマットされた関数名とパラメータ

"public-profile"の引用符は一重引用符ですが、あなたもonclick='...'に一重引用符を使用しているため動作しませんので、二重引用符を使用する必要があります。二重引用符で囲みます。

Answer 2

は、文字列として全部渡します

"<tr onclick='parent.viewEngine.pageChange(\'public-profile\', 1, " + id + ", " + uid + ");>" // + (...) 

をしかし、あなたはjQueryのを使用しているとして、あなたは.on()をクリックハンドラをアタッチする必要があります。

Answer 3

これは、関数を実行していて連結していないためです。試してみてください：

onclick='parent.viewEngine.pageChange("public-profile", 1, id, uid);' 

Answer 4

少し単純化する方がいいかと思います。

あなたの行が動的に追加されている場合は、<tr>タグにメタデータのいくつかの種類を入れてみてくださいは、例えば

<tr id="id" name="uid"> 

次に、あなたのjQueryを使って次のことを試してください（v.1.7が必要）：このような何か

$('#history-table tr').on('click', function(){ 
    parent.viewEngine.pageChange('public-profile', 1, this.id, this.name); 
}); 

は、これはおそらく、あなたのページには、作品をレンダリングする方法に応じて変更が必要になりますが、それは多くのクリーナーだとあなたのメインテーブルのマークアップから削除された読みやすい。

Answer 5

くださいこの - >

$("#contribution-" + uid).click(function(){ 
    parent.viewEngine.pageChange('public-profile',1, id, uid); 
}); 

てみませんか二つのこと：

1）

とすぐfor文であると声明 'のため' の外に移動し実行されると、クリック機能も実行されます。このfor文では、click関数がコールバック関数として提供されていません。これが私の解決策である>

$("tr[id^='contribution-'").on('click', function(){ 
    var idString = $(this).attr("id").split("-"); //split the ID string on every hyphen 
    var uid = idString[1]; //our UID sits on the otherside of the hyphen, so we use [1] to selec it 
    //our UID will now be what we need. we also apply our click function to every anchor element that has an id beginning with 'contribution-'. should do the trick. 
    parent.viewEngine.pageChange('public-profile',1, id, uid); 
}); 

-

2）に変更し。