世界。私はまだ Python と JavaScript の初心者なので、私のコードと私のメソッドは、経験豊富な開発者にとっては少し「奇妙」に見えるかもしれませんが、今日、1 つまたは 2 つのことを学べることを期待しましょう。
django によってコードが生成された HTML ページがあります。
HTMLテーブルコードを生成するDjango関数:
def calendar_days_define(cMonth, cYear):
Calendar = []
calendarMatrix = calendar.monthcalendar(cYear, cMonth)
for element in calendarMatrix:
Calendar.append('<tr>')
weekday = 0
for i in element:
weekday += 1
if weekday > 5:
if i > 0:
Calendar.append('<td class="days_Weekends_days">{0}</td>'.format(i))
else:
Calendar.append('<td class="days_Weekends_days"></td>')
else:
if i > 0:
Calendar.append('<td class="days_Works_days">{0}</td>'.format(i))
else:
Calendar.append('<td class="days_Works_days"></td>')
Calendar.append('</tr>')
DoneCalendar = ''.join(Calendar)
DoneCalendar = '<table id="calendar_Inside_Changeable_Mesh">{0}</table>'.format(DoneCalendar)
return DoneCalendar
それはまさに私が必要とする方法で、HTML テーブルにラップされた素敵なカレンダーを生成します。別の月に新しいテーブルを生成したいときに問題が発生します。新しいカレンダー テーブルを生成する必要があるため、JavaScript による ajax 呼び出しを使用して、django に新しい HTML テーブル コードを生成させ、古いテーブルを新しいテーブルに置き換えます。
function redrawCalendar(cMonth, cYear) {
$.ajax({
type: 'POST',
url: '/edit/ajax_change_calendar',
data: {cMonth: cMonth, cYear: cYear},
success: function (data) {
$('#calendar_Inside_Changeable_Mesh').replaceWith(data);
}
})
}
これにより、新しいテーブルが作成されますが、問題は、この新しいテーブルにアクセスできないことです。例えば:
$('.days_Work_days').css("color","red")
動作しなくなりました。なんで?クライアントサイドでJavaScriptでテーブルのコードを生成するのがより適切な方法のような気もしますが、その場合は書き直しますが、やはり気になります。誰かがここで私を助けることができれば、感謝します。
アップデート
変更が発生する最初の HTML ページの一部を次に示します。
<table><tr><td> {{ defineCalendar|safe }} </td></tr></table>
ページが読み込まれると、django はこの変数に id="calendar_Inside_Changeable_Mesh" を含むカレンダー テーブルを設定し、ソース ページは次のようになります。
<table><tr><td>
<table id="calendar_Inside_Changeable_Mesh"> ...a bunch of <tr> and <td> with days numbers as value... </table>
</td></tr></table>
JS でこのテーブルに $('#calendar_Inside_Changeable_Mesh') としてアクセスできます。例えば:
$('#calendar_Inside_Changeable_Mesh').css('border-collapse','collapse')
すべて順調。ページ全体をリロードせずに新しいカレンダー テーブルを生成する場合は、前に示した ajax JS 関数を呼び出します。その後、HTML 部分は次のようになります。
<table><tr><td>
<table id="calendar_Inside_Changeable_Mesh"> ...a bunch of <tr> and <td> with different days numbers as value... </table>
</td></tr></table>
ほとんど同じように見えますが、たとえばもう一度行うと、次のようになります。
$('#calendar_Inside_Changeable_Mesh').css('border-collapse','collapse')
何も起こりません。
ボタンをクリックするとJSが発生します。
$('#calendarBtn_Back').click(function() {
redrawCalendar(cMonth, cYear)
)}
ボタンは calendar_Inside_Changeable_Mesh テーブルの外側にありますが、それを含むテーブルの内側にあります。
最終更新
わかりました、それは私の側ではかなりばかげていました。神酒のために2日かかりました。私の間違いは、私が何をしているかを正確に皆さんに見せなかったことです。使ってるって言ってた
$('#calendar_Inside_Changeable_Mesh').css('border-collapse','collapse')
実際には次のように見えたとき:
var calendar_Inside_Changeable_Mesh = $('#calendar_Inside_Changeable_Mesh');
そして、このグローバル変数は次の関数で使用されました。
calendar_Inside_Changeable_Mesh.css('border-collapse','collapse');
ページが読み込まれると、すべて正常に動作します。しかし、同じIDでもテーブルを新しいテーブルに動的に置き換えると、変数とのバインドが明らかに壊れます。関数内で変数宣言を移動すると、関数が問題を解決するたびに変数が要素にバインドされます。さて、皆さん回答ありがとうございます。あなたのアドバイスのおかげで、正しい方向に考えることができました。次回は、正確で正確なスニペットを投稿するようにします。