Question

私はJQueryを使い慣れていて、本当に助けてくれてありがとう！ は、私は、各チェックボックスをクリックしたときに、画像やアイコンが....クリックで変更したいその上にアイコンや画像を持っている動的なチェックボックス（チェックボックスが隠されている）...

plcUserReq.Controls.Add(new LiteralControl(" 
<div data-toggle='buttons' style='margin-top:-3px'> 
    <label class='btn' for='Lines' style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px'> 
    <input type='checkbox' autocomplete='off' name='chkbx' value='" + UID.ToString() + "'id='chk'"+ UID.ToString() + i.ToString() +"/> 
      <i class='btn fa fa-plus-square-o' aria-hidden = 'true'> 
       <img src='http://localhost:3162/images/moderator-red.gif'></i></label></div>")); 

を持っています...

これは私がしようとしているスクリプトです...

$("[name='chkbx']").change(function() { 
     if ($(this).is(':checked')) 
      { 
      $(this).next().find('i').attr('class', 'btn fa fa-check-square-o'); 
      $(this).next().find('img').attr('src', 'http://localhost:3162/images/moderator-red.gif'); 
      } 
     else 
     { 
      $(this).next().find('i').attr('class', 'btn fa fa-plus-square-o'); 
      $(this).next().find('img').attr('src', 'http://localhost:3162/images/moderator-blue.gif'); 
     } 
}); 

何もチェックボックスのいずれかがクリックされたとき...私は、問題は私のjQueryを使っているものを把握するように見えることはできません起こりません。 。 助けてください！私は立ち往生している！ （それはこのようになります）チェックするとhttps://jsfiddle.net/Lgxacm9m/3/

：

JSFiddleのjQueryでhttps://jsfiddle.net/m278c236/1/

Answer 1

を#は、特定idによって要素を識別するために使用されます。チェックボックスにはidのchkbxが含まれていませんが、nameはchkbxです。だから、：

$("#chkbx").change(function() {

は次のようになります。

$("[name='chkbx']").change(function() {

EDIT：イベントがまだ発射されていない場合、あなたのイベントハンドラは、チェックボックス要素がにロードされる前にバインドしようとすることは可能ですDOM。これは、ページ全体がレンダリングされた後にのみコードが実行されるようにすることで解決できます。次のようにこれを実現するために、あなたのコードを編集します。

$(function() { 
    $(document).on("change", "[name='chkbx']", change(function() { 
     alert("At least the event is firing..."); 
     if ($(this).is(':checked')) 
     { 
      $(this).next().find('i').attr('class', 'btn fa fa-check-square-o'); 
      $(this).next().find('img').attr('src', 'http://localhost:3162/images/moderator-red.gif'); 
     } 
     else 
     { 
      $(this).next().find('i').attr('class', 'btn fa fa-plus-square-o'); 
      $(this).next().find('img').attr('src', 'http://localhost:3162/images/moderator-blue.gif'); 
     } 
    }); 
}); 

$(function() { })が$(document).ready()