當點擊它時，複選框不會改變它的檢查狀態

我是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而呈現時。

來源

2012-12-22 adler

從CSS判斷，我想你正在使用一個技巧來改變複選框的外觀。也許實際的複選框被一些其他的CSS代碼隱藏起來，你看到的是bg圖像。 – bfavaretto

是的，它是如何完成的。但是讓我感到困惑的是 - 它有時會起作用（當頁面加載時顯示覆選框），但有時 - 它不會（當checkbox加載到某個div元素中時）。我在Chrome的「Inspect Element」幫助下檢查了這兩種情況下的元素，發現在第一種情況下，有一些jquery處理程序可用於鼠標點擊和鼠標停止事件。在第二種情況下 - 只有鼠標點擊事件的處理程序，但不適用於鼠標點擊事件。 – adler

必須在頁面加載時運行一些其他js代碼來初始化您的自定義複選框。 – bfavaretto

您已經省略了複選框的處理程序，但您可能需要爲其使用委託處理程序（文檔爲on）。實際上，您可以將處理程序委託給DOM中保留在頁面上的更高級別的元素（或者，如果沒有更低級別的元素可以工作，那麼也可以是body元素），並提供選擇器過濾器，以便在處理程序被調用時查看如果它匹配事件目標。通過這種方式，您可以創建一個處理程序，該處理程序可以應用一次，並可以與稍後添加的動態元素一起使用

$('body').on('click', 'input[type="checkbox"]', function() { 
     // handler function 
});

來源

2012-12-22 20:46:38 tvanfosson

我已經更新了一個問題，現在你可以看到我的意思是一個「按鈕」的處理程序，但不是一個複選框。 – adler

在回調中添加html之後，再連接點擊處理程序。

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

鑑於問題可能是一個CSS /造型問題。我認爲某些元素正在浮動在複選框上並阻止它被點擊。你可以用鉻檢查器看看它，看看把鼠標放在複選框上時會發生什麼？

來源

2012-12-22 20:47:32

謝謝，但這個處理程序 - 不是一個複選框的處理程序，而是一個「按鈕」的處理程序，它會發佈一個操作，該操作會使用我的複選框（實際上不起作用）返回html。我會更新說明，使其更清晰... – adler

你不能檢查和取消與鼠標或它不觸發一些東西？澄清cb應該做什麼，而不僅僅是它不是什麼 –

它應該在點擊它時改變它的檢查狀態。但它並沒有這樣做。即使在視覺上也不會改變。儘管它看起來不像... – adler

當點擊它時，複選框不會改變它的檢查狀態

回答

相關問題