.on の使い方（新しい要素にイベントを関連付ける）

javascript jquery

.on の使い方（新しい要素にイベントを関連付ける）
https://app.codegrid.net/entry/practical-jquery-1　を参照．

JQUERYでは存在しない要素にはイベントをつけられない．
そこで.onを使ってあとからつけた要素にもイベントを発生させられるようにする．
「デリゲートを利用したイベント設定」

（１）基本的には、上の階層の要素にonイベントをつける(div#mode_change)．
（２）一つ目の引数にclickなどのイベントハンドら (input.easy_mode or input.detail_mode)
（３）二つ目の要素にあらたに発生するイベントをかく．

これがイメージ：
$('ul').on('click', 'li', function() {
$(this).css('color', 'red');
});


例）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>テーブル</title>

<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<script language="javascript" type="text/javascript" src="base/js/jquery-1.11.1.js"></script>



<script type="text/javascript">

//val=0;
//val2=val;
val2="0";
k=0;
$(document).ready(function()
{
        $("#mode_change").on("click",".detail_mode",function(){

                $("#filter").hide();
                $(this).attr("value","選択モード");
                $(this).attr("class","easy_mode");



                $("#filter").after('<div id="filter_text"></div>');

                str='<li>入力<input type="text" pre_header="6" name="box1u_text" class="filter_radio">'

                $("#filter_text").html(str);

        });


        $("#mode_change").on("click",".easy_mode",function(){
                        //alert("test");

                $("#filter_text").remove();

                $("#filter").show();

                $(this).attr("class","detail_mode");

                $(this).attr("value","直接入力モード");

        });







}


);
</script>

</head>
<body>
  <!-- <div class="file"> -->
<h4>テスト</h4>

<div id="filter">
        <ul>
        <li>選択
        <ul>
        <li><input type="radio" class="filter_radio" name="box1u" pre_header="6" value=1000'>大</input>
        <li><input type="radio" class="filter_radio" name="box1u" pre_header="6" value=1000'>小</input>

</div>
<div id="mode_change"> <input type="submit" class="detail_mode" name="test2" value="値の直接入力モード"></div>
<div id="fig1234"></div>

</body>
</html>