Использование JQuery с динамически добавленными элементами управления (MVC)

Question

У меня есть набор радиокнопок, которые генерируются динамически (через вызов JSON):

StringBuilder sbEligAll = new StringBuilder();

sbEligAll.Append("<div id='currentselectiondepartment'>");
sbEligAll.Append("  <input type='radio' name='selectalldepartment' id='radCurrent' value='0' /><label for='radCurrent'>Current</label>");
sbEligAll.Append("  <input type='radio' name='selectalldepartment' id='radFuture' value='1' /><label for='radFuture'>Future</label>");
sbEligAll.Append("  <input type='radio' name='selectalldepartment' id='radCurrentAll' value='2' /><label for='radCurrentAll'>Current All</label>");
sbEligAll.Append("  <input type='radio' name='selectalldepartment' id='radFutureAll' value='3' /><label for='radFutureAll'>Future All</label>");
sbEligAll.Append("</div>");

Тогда:

return Json(new { TableList = sbElig.ToString() }, JsonRequestBehavior.AllowGet);

Есть ли способ заставить jQuery взаимодействовать с ними?

Например:

$("input[name=selectalldepartment]").change(function() {
     var str = $('input[name=selectalldepartment]:checked').val();
     $(".radiolist[value='" + str + "']").attr("checked", true);
});

Я перепробовал все, что я умею делать, но jQuery просто не запускается. (Я добавил оповещения в код jQuery, чтобы увидеть, действительно ли он вызывается, а это не так).

Есть мысли?!

Спасибо!

Answer 1

Используйте .live() как это:

$("input[name=selectalldepartment]").live('change', function() {
     var str = $('input[name=selectalldepartment]:checked').val();
     $(".radiolist[value='" + str + "']").attr("checked", true);
});

Когда вы запускаете ваш текущий код, он ищет этот селектор и присоединяет обработчик событий к этим элементам ... новые элементы не были там присоединены, когда он был запущен. Другой вариант - когда вы добавляете элементы управления, добавьте туда обработчик для новых, соответствующих тому же селектору в ответе, что-то вроде этого:

$.ajax({
    url: blah.aspx...
    success: function(data) {
      //do stuff
      $("input[name=selectalldepartment]", data).change(function() {
        //Code or a function to keep it tidy
      });
    }
});