divにJqueryを追加した後に、jqueryでCSS要素を変更するにはどうすればよいですか？

Question

私はToDoリストを作成していますので、チェックボックスを付けて新しい入力タグを追加しているので、ToDoリスト項目をチェックすることができます。私は、それがチェックされたときにテキストがそれを通って表示されるように、CSSを変更するのに問題があります。 check関数が機能し、実行されますが、特定のhtml要素に行を挿入できません。

var add = function() { 
var task = $("#taskTextBox").val(); // references the value inside #task 
if(task != ""){ 
    inc++; 
    var itemName = "item" + inc; 

    var newObj = $("#list").append("<input id="+itemName+" type=checkbox class="+itemName+">"+task+"<br></br>");// makes a new <p> element 
    $("#taskTextBox").val(""); // empties out #task 
    var newHeight = $("#list").height() + 40; 
    $("#list").css({"height": newHeight}); 
    addAttributes(); 


$("input[class=" + itemName + "]").change(function() { 
    if ($(this).prop("checked")) { 

    $("input[class=" + itemName + "]").css({'text-decoration': 'line-through'}); 

    } else{ 
     $("#list").css({"text-decoration": "none"}); 
    } 
}); 
}}; 

Answer 1

EDIT：

私はあなただけのチェックボックスのスタイルに影響を与えていないテキストは、それに従っている入力にクラスを追加しているので、あなたのコードが機能していないことを言及するのを忘れてしまいました。

私のコードを動作させるには、この行を修正し、スパンを追加してタスクをラップするだけです。これ以上変更機能は必要ありません。

var newObj = $("#list").append("<input id="+itemName+" type=checkbox class="+itemName+"><span>"+task+"</span><br></br>");// makes a new <p> element 

---

SOLUTION：

あなたが使用してプレーンなCSSでこれを達成することができます：擬似クラスチェックし、スパンまたは直接ご入力を次のセレクタとして使用することができる他の任意のタグを使用して：

---

JSFiddle

---

コードスニペット：

.example:checked + span { 
 
    text-decoration: line-through; 
 
}

<input class="example" type="checkbox"><span>Eggs</span> 
 
<input class="example" type="checkbox"><span>Milk</span>