剃刀和JavaScript编码

Question

I have a ASP.NET MVC application and question is, how to correctly code what I have done in Razor with JavaScript. In the below example I have three buttons in Razor and the script works correctly. The in next example I use a helper in JavaScript that needs to do the same, (the script within the script) is not working. It also appears the bootstrap layout containers are recognized. How do I do this correctly?

Razor (working well)

panelbar.Add().Text("Third Person")

          .Content(@<div style="padding: 10px;">
              <div id="cont5_container" class="container">

                          <span class="label label-primary">Age</span>
                          <br />
                          <br />
                          <div class="btn-group" id=ageID2>
                      <button type="button" style="width:120px" class="btnMyAge5 btn-default" id="3">Under 10</button>
                      <button type="button" style="width:120px" class="btnMyAge5 btn-default" id="1">Under 50</button>
                      <button type="button" style="width:120px" class="btnMyAge5 btn-default" id="2">Over 50</button>

                      @Html.TextBoxFor(m => m.ageID, new { @class = "input k-textbox", id = "MyAge5", Value = "", style = "width: 50px;" })
                  </div>

                  <script>
                      $(".btn-group > .btnMyAge5").click(function () {
                          $(this).addClass("active").siblings().removeClass("active");
                          document.getElementById('MyAge5').value = $(this).attr("id");
                      })
                  </script>
               </div>

           </div>);

JavaScript (Can't be correct)

<script type="text/javascript">

function OnClickAdd() {
    $("#panelbar").kendoPanelBar();
    var panelBar = $("#panelbar").data("kendoPanelBar");

    panelBar.append(
        {
            text: "New Person",
            encoded: true,
            content: [

                         '<div id="cont6_container" class="container">',
                                '<span class="label label-primary">Age</span>',
                                '<br /><br />',
                                  '<div class="btn-group" id=ageID>',
                                     '<button type="button" style="width:120px" class="btnMyAge3 btn-default" id="3">Under 10</button><button type="button" style="width:120px" class="btnMyAge3 btn-default" id="1">Under 50</button><button type="button" style="width:120px" class="btnMyAge3 btn-default" id="2">Over 50</button>',
                                     '@Html.TextBoxFor(m => m.ageID, new { @class = "input k-textbox", id = "MyAge3", Value = "", style = "width: 50px;" })',
                                 '</div>',
                           '</div>'
                    ]
           }
                  )
                        }

<script>
$(".btn-group > .btnMyAge3").click(function () {
    $(this).addClass("active").siblings().removeClass("active");
    document.getElementById('MyAge3').value = $(this).attr("id");
})

Answer 1

it looks like at the time your click handler assignment in the second script tag fires the content appended by the first script tag hasn't been added to the DOM. You should register the click handler in the same function that adds the button to the HTML.