Присоединение методов .click к классам, загруженным через Ajax

Question

Я немного растерялся из-за прикрепления событий .click к динамической загрузке данных с других страниц ...

У меня есть главная таблица.Первый столбец каждой строки кликабелен для загрузки вложенной таблицы.Упомянутая вложенная таблица должна действовать таким же образом, щелкая первое значение, открывая вложенную таблицу.

<table>
  <tr>
    <td class="ClickMe" id="1">Title Of Row</td>
    <td>Main Data1</td>
    <td>Main Data2</td>
  </tr>
  <tr>
    <td class="ClickMe" id="2">Title Of Row</td>
    <td>Main Data1</td>
    <td>Main Data2</td>
  </tr>
</table>
<script type="text/javascript">
$(function () {
  function LoadSub1(inputRowID)
  {
    $.ajax({
      url: 'SomePage.php',
      data: 'ID='+inputRowID,
      success: function(data){
        $("#Details1").html(data);
      }
    })
  }

  $("td.ClickMe").click(){
    // remove previous added row
    $("#AddedRow").remove();

    // Get new id
    var RowID = $(this).attr("id");

    // Create new row with <div> to populate
    $(this).after("<tr id="AddedRow"><td><div id="Details1"></div></td></tr>");

    // Load sub-table into <div>
    LoadSub1(RowID);
  }

  $("td.ClickMe2").click(){
    var subRowID = $(this).attr("id");
    // some further table loading based on sub-table id value
  }
}
</script>

Если у файла SomePage.php есть таблица с тегом,) событие на главной странице не запускается.

Есть предложения?Помощь наиболее ценится.

Answer 1

Обработчики событий, связанные с .click(), применяются только к элементам, которые в настоящее время находятся в DOM. Чтобы привязать обработчики событий к элементам сейчас и в будущем, используйте .live() или .delegate():

С .delegate() (рекомендуется):

$("#Details1").delegate("td.ClickMe", "click", function () {
    // remove previous added row
    $("#AddedRow").remove();

    // Get new id
    var RowID = $(this).attr("id");

    // Create new row with <div> to populate
    $(this).after("<tr id='AddedRow'><td><div id='Details1'></div></td></tr>");

    // Load sub-table into <div>
    LoadSub1(RowID);
}

С .live():

$("td.ClickMe").live("click", function () {
    // remove previous added row
    $("#AddedRow").remove();

    // Get new id
    var RowID = $(this).attr("id");

    // Create new row with <div> to populate
    $(this).after("<tr id='AddedRow'><td><div id='Details1'></div></td></tr>");

    // Load sub-table into <div>
    LoadSub1(RowID);
}

(также исправлены кавычки в добавленном html)

Answer 2

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

Live работает по-другому, используя метод live, автоматически переназначает событие click для целевых элементов управления даже при изменении DOM Ознакомьтесь с документацией здесь: http://api.jquery.com/live/

НТН.