JQuery Bind против Live - PullRequest
Новая
       1

JQuery Bind против Live

0 голосов
/ 27 августа 2011

Я заполняю элемент некоторыми html: таблицами, флажками.В моем флажке есть событие onclick, но страница, похоже, не прослушивает событие click.Я подозреваю, что это потому, что она была загружена после того, как функция Javascript Checkall () была помещена в DOM.

Вот что у меня есть: 

<select name="showcuslist" id="showcuslist">
  <option value="0">select a customer</option>
  <option value="1">John Smith</option>
  <option value="2">Jane Smith</option>
</select>

<div id="loadtables">---ajax loads stuff into here---</div>

<script language="javascript" type="text/javascript">
$(document).ready(function(){ 

  $("#showcuslist").change(function(){
   $.ajax({
     data:"formId=grabcusinfo&cusid="+$(this).val(),
     success:function(response){ eval(response); } 
   });
  });


});

function checkall(){
  $(".checkboxes").attr("checked",true);
}
</script>

Просто, когда я попадаю на эту страницу, я могувыберите клиента из выпадающего меню.Ничего сложного.
Затем Jquery вызывает страницу на сервере с целью сбора информации об этом клиенте.Информация на самом деле представляет собой список заметок, поэтому ничего особенного.Но я форматирую заметки в html-таблицу.

Первый столбец в этой html-таблице имеет флажки, соответствующие каждой записи Note.Я также поставил мастер-флажок сверху, поэтому, если я установлю этот флажок, будут отмечены все флажки.

HTML-таблица загружается невероятно, однако этот главный флажок не работает.

Вот HTML-таблица, которую я загружаю в 

<?php
    $alltables='<table>';
    $alltables.='<tr>';
      $alltables.='<th><input type="checkbox" id="checkall" class="checkall" onclick="checkall();" /></th>';
      $alltables.='<th>Notes Title</th>';
    $alltables.='</tr>';

    $alltables.='<tr>';
      $alltables.='<td><input type="checkbox" id="someID" class="checkall" /></td>';
      $alltables.='<td>Notes Title Text...</td>';
    $alltables.='</tr>';
    $alltables.='</table>';

    $("#loadtables").html("'.addslashes($alltables).'");
?>

The checkall ();Функция работает нормально, если я загружаю таблицу при загрузке страницы, но не когда загружаю новую таблицу с новыми данными.

Мне сказали, что здесь помогают live () или bind (), ноЯ, честно говоря, не понимаю документы JQuery.

Ответы [ 2 ]

2 голосов
/ 27 августа 2011

.bind() устанавливает прослушиватель действия для всех соответствующих элементов во время вызова функции .

.live() будет проходить по дереву DOM и реагировать на все прошлые и будущие совпадающие элементы во время действия. (IIRC)

Я бы ожидал, что bind будет более эффективным, но live будет лучше поддерживать добавление / удаление элементов DOM.

2 голосов
/ 27 августа 2011

Использование .bind() приведет к привязке к событию для всех соответствующих элементов DOM, которые существуют во время вызова функции связывания . Использование .live() будет связывать все соответствующие элементы DOM, которые существуют во время вызова метода , и любые соответствующие элементы DOM, которые будут добавлены динамически в будущем .

Итак, если вы добавляете элементы, для которых вы хотите запустить некоторый jQuery, вы должны использовать .live(), чтобы автоматически связывать функцию обработчика событий с этими элементами по мере их добавления.

Поскольку вы выписываете <input type="checkbox" id="checkall" class="checkall" onclick="checkall();" /> как часть таблицы, я бы изменил ваш код следующим образом:

  1. удалить атрибут onclick из элемента ввода. 

    <input type="checkbox" id="checkall" class="checkall" />

  2. добавить обработчик кликов, используя функцию live 

    $(".checkall").live("click", function() { checkall(); });
...