jQuery點擊不會啓動

Question

我有一個textbox，一個複選框和一個span標記。當我點擊複選框時，它應該在span標記中顯示其狀態。當更新textbox時，它將重新插入複選框塊。當你現在單擊複選框時，它無法更新狀態。

我正在使用on事件處理程序的複選框單擊事件，所以我期望它的工作。

任何想法爲什麼這不按預期工作？

$('div[role] input[type=checkbox]').on('click', chg); 
 

 
$('div[role] input[type=text]').on('input', sourceChanged); 
 

 
function chg() { 
 
    var istiki = $(this).is(":checked"); 
 
    $('#upd').html(istiki); 
 
} 
 

 
function sourceChanged() { 
 
    $('span', $(this).closest('.input-group')).html('<input type="checkbox">'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div role="Tiki" class="input-group"> 
 
    <input type="text" class="form-control" /> 
 
    <span class="input-group-addon"><input type="checkbox" /></span> 
 
</div> 
 
<span id="upd"></span>

Answer 1

當你動態創建一個新的複選框，當值發生變化，則需要通過將其分配到一個非動態的祖先委派事件的複選框：

$('div[role]').on('change', 'input[type=checkbox]', chg); 

請注意我如何使用change而不是click，因爲這對於複選框更合適。

---

在下面的代碼片段，我也改變$(this).is(":checked")只是this.checked。

$('div[role]').on('change', 'input[type=checkbox]', chg); 
 

 
$('div[role] input[type=text]').on('input', sourceChanged); 
 

 
function chg() { 
 
    var istiki = this.checked; 
 
    $('#upd').html(istiki); 
 
} 
 

 
function sourceChanged() { 
 
    $('span', $(this).closest('.input-group')).html('<input type="checkbox">'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div role="Tiki" class="input-group"> 
 
    <input type="text" class="form-control" /> 
 
    <span class="input-group-addon"><input type="checkbox" /></span> 
 
</div> 
 
<span id="upd"></span>

還要注意的是，如果你想讓它說false您應將istiki變量轉換爲字符串：

$('#upd').html('' + isticki);