1

私はASP.NET MVCの初心者で、ページが最初にロードされたよりも後にページに表示される場合、チェックボックスで発生する問題に直面しました。次のシナリオを見てください。たとえば、ボタンをクリックすると、Javascript ハンドラーがコントローラーのポストアクションを呼び出し、その結果の html が具体的な div に読み込まれます。このhtmlには、マウスダウンイベントに反応しないチェックボックスが含まれています（チェック状態を変更しません）。

チェックボックスがページ全体とともにレンダリングされた場合は正常に機能しますが、後でレンダリングされた場合 (ポストアクションの結果として) は機能しません。ここで私のマークアップを参照してください：

<a name="button" onclick="handler();"></a>

「ボタン」をクリックActionResultして、コントローラーから取得してdivに入れたい：

<div id="resultWillBeLoadedIn">
    <!-- here is placeholder-->
</div>

次の html は /SomeController/SomeAction から返され、上記の div にロードされます。

<span class="check">
    <span class="checkbox">
        <input type="checkbox" name="form" value="2" />
    </span>
</span>

これが私の「ボタンクリック」のJavascriptハンドラーです。

function handler() {
    var url = '/SomeController/SomeAction';
    $.post(url, { params... }, function (result) {
        $('#resultWillBeLoadedIn').html(result);
}

それについては、CSS の一部を参照してください (私は CSS の専門家ではないので、ここで表示する必要があるかどうかはわかりません。そして... (正直に言うと) 私は著者ではありません)。それ以上必要な場合は教えてください):

.check .checkbox{
float: left;
height: 12px;
width: 12px;
display: inline-block;
margin: 3px 5px 0 0;
cursor: pointer;
background: url(../img/checkbox.png) 0 0 no-repeat;
}
.check span.disable{
float: left;
height: 12px;
width: 12px;
margin: 3px 5px 0 0;
display: inline-block;
background: url(../img/checkbox.png) 0 -24px no-repeat;
}

チェックボックスがページの読み込み時に正しくレンダリングされた場合だけでなく、いくつかの div へのポストバックの結果としてレンダリングされた場合でも機能しないようにするために何が欠けているか教えてください。

4

2 に答える 2

0

チェックボックスのハンドラーを省略しましたが、おそらく委任されたハンドラーを使用する必要があります ( docs for on )。基本的に、ハンドラーをページに残る DOM の上位レベルの要素 (下位レベルの要素が機能しない場合は body 要素) に委任し、ハンドラーが呼び出されて表示されるときに使用されるセレクター フィルターを提供します。イベントターゲットに一致する場合。このようにして、一度適用され、後で追加される動的要素で動作するハンドラーを持つことができます。

$('body').on('click', 'input[type="checkbox"]', function() {
      // handler function
});
于 2012-12-22T20:46:38.750 に答える
0

コールバックに html を追加したら、クリック ハンドラを接続します。

$('selectCheckbox').on('click', handler);

問題を考えると、CSS/スタイリングの問題である可能性があります。一部の要素がチェックボックスの上に浮かんでいて、クリックできないようになっていると思います。chrome インスペクタでそれを見て、マウスをチェックボックスの上に置いたときに何がホバリングされているかを確認できますか?

于 2012-12-22T20:47:32.350 に答える