JavaScript的複選框功能只工作一次

Question

使用引導3.3.6和jQuery 1.11.3

我在與一小部分的問題，特別是關於選擇和取消選擇複選框當行的用戶點擊。

的jsfiddle這裏：http://jsfiddle.net/0ogdt9s7/1/

HTML

<div id="not-working"> 
    <h3> 
    Click the text, then click the box 
    </h3> 
    <div class="selection-row" data-id="20"> 
    <div class="col-md-5">Data 20</div> 
    <div class="col-md-2"> 
     <input type="checkbox" name="selectedDudes[]" value="20" id="checkbox-20"> 
    </div> 
    </div> 
    <div class="selection-row" data-id="22"> 
    <div class="col-md-5">Data 22</div> 
    <div class="col-md-2"> 
     <input type="checkbox" name="selectedDudes[]" value="22" id="checkbox-22"> 
    </div> 
    </div> 
</div> 

JS

$(document).ready(function() { 

    $(document).on("click", "div.selection-row", function() { 
    var $cb = $('input[type="checkbox"]', $(this)), is_on = $cb.prop('checked'); 
    if (is_on) { 
     //if its already checked, uncheck it 
     $cb.prop('checked', false); 
    } else { 
     //if its not checked, check it 
     $cb.prop('checked', true); 
    } 
    }); 
}); 

行選擇的偉大工程，但如果你點擊複選框行裏面，複選框不會更改。點擊'數據'會正確更改它，但複選框沒有任何作用。

必須注意的：

它必須位於內$(document).on()，因爲這是它通過AJAX顯示彈出裏面。

我假設這是超級簡單的東西，但我無法找到它。任何幫助表示讚賞。

Answer 1

由於Bubbling phase，您將收到意想不到的結果。

事件的冒泡階段觸發從底部聽事件頂部的所有元素的父母：

在你的情況下，當用戶點擊複選框第一次，它被選中。然後，Blubbling階段發生並開始搜索正在監聽事件的最接近的父代，如果有任何其處理程序（函數）被執行。你有一個：selection-row。

.selection-row元素的處理程序恢復了複選框的默認行爲，所以它就像用戶沒有做任何事情。

如果你想要的是，當用戶點擊Data 20或Data 22和各自的複選框被選中，你不需要使用javascript。一個label元素應該解決：

<div class="selection-row" data-id="20"> 
    <div class="col-md-5"><label for="checkbox-20" >Data 20</label></div> 
    <div class="col-md-2"> 
     <input type="checkbox" name="selectedDudes[]" value="20" id="checkbox-20"> 
    </div> 
    </div> 
    <div class="selection-row" data-id="22"> 
    <div class="col-md-5"><label for="checkbox-22">Data 22</label></div> 
    <div class="col-md-2"> 
     <input type="checkbox" name="selectedDudes[]" value="22" id="checkbox-22"> 
    </div> 
    </div> 

檢查出來：http://jsfiddle.net/0ogdt9s7/2/

如你所說，你需要整行可點擊，您可以檢查該事件的原始目標（最裏面的元素）是input，讓默認行爲完成其工​​作由中斷處理程序與return;：該解決方案

$(document).on("click", "div.selection-row", function(e) { 
    if ($(e.target).is('input')) return; 

    var $cb = $('input[type="checkbox"]', $(this)), is_on = $cb.prop('checked'); 
    if (is_on) { 
     //if its already checked, uncheck it 
     $cb.prop('checked', false); 
    } else { 
     //if its not checked, check it 
     $cb.prop('checked', true); 
    } 
    }); 

檢查：http://jsfiddle.net/0ogdt9s7/6/

Answer 2

同事只是一個目標檢查解決了這個問題：

http://jsfiddle.net/0ogdt9s7/4/

$(document).ready(function() { 
    $(document).on("click", ".selection-row", function(e) { 
    var $target = $(e.toElement); 
    if (!$target.is('input')) { 
     console.log($target); 
     var $cb = $('input[type="checkbox"]', $(this)), 
     is_on = $cb.is(':checked'); 
     if (is_on) { 
     //if its already checked, uncheck it 
     $cb.prop('checked', false); 
     } else { 
     //if its not checked, check it 
     $cb.prop('checked', true); 
     } 
    } 
    }); 
}); 

將保持這種開放了一下，看看那裏有一個更好的解決方案

Answer 3

你可以改變你的元素聆聽點擊文字如下：

$(".selector").click(function() { 
 
    $(this).parent().find(".chkbox").trigger("click"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="not-working"> 
 
    <h3> 
 
    Click the text, then click the box 
 
    </h3> 
 
    <div data-id="20"> 
 
    <div class="col-md-5 selector">Data 20</div> 
 
    <div class="col-md-2"> 
 
     <input class="chkbox" type="checkbox" name="selectedDudes[]" value="20" id="checkbox-20"> 
 
    </div> 
 
    </div> 
 
    <div data-id="22"> 
 
    <div class="col-md-5 selector">Data 22</div> 
 
    <div class="col-md-2"> 
 
     <input class="chkbox" type="checkbox" name="selectedDudes[]" value="22" id="checkbox-22"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 4

確定這裏是一個乾淨的例子有引導的名單組

$(".list-group-item").click(function(event) { 
    var target = $(event.target); 
    if (target.is("input")) { 
    $(this).trigger(click); 
    } else { 
    $(this).find(".chkbox").trigger("click"); 
    } 
}); 

<ul class="list-group"> 
    <li class="list-group-item"> 
    <input class="chkbox" type="checkbox"> Porta ac consectetur ac 
    </li> 
</ul> 

DEMO