Функция jQuery выполняется более одного раза, почему?

Question

Делаю страницу с DIV в середине его с идентификатором «devices_div,» как так:

<div id="devices_div"></div> 

При загрузке страницы или когда форма была отправлена, содержимое resource_table .php загружаются в DIV:

<script> 
    jQuery(document).ready(function() 
    { 
     jQuery("#devices_div").load("resource_table.php"); 

     jQuery("#form").submit(function(event) 
     { 
      event.preventDefault(); 

      var form = jQuery(this); 

      jQuery.ajax({ 
       type: "POST", 
       data: form.serialize(), 
       url: form.attr("action"), 
       success: function(data) 
       { 
        jQuery("#devices_div").load("resource_table.php"); 
       } 
      }); 
     }); 
    }); 
</script> 

содержание resource_table.php являются:

<script> 
    jQuery("a#add_device").live('click', function() 
    { 
     jQuery("table#devices tr:last").after("<tr><td>Test</td><td>Test</td></tr>"); 
    }); 
</script> 

<table id="devices"> 
    <tr> 
     <th> 
      Name 
     </th> 
     <th> 
      Xml Name 
     </th> 
    </tr> 
</table> 

<a id="add_device" href="#">Click here to add a device</a> 

Когда я щелкаю по ссылке с идентификатором "add_device" пихты st time, он добавляет строку в таблицу «устройства» просто отлично.

Возникла проблема: при отправке формы и повторной ссылки на ссылку она добавляет две строки. Если я отправлю форму и нажмите ссылку в третий раз, она добавит три строки и т. Д. Таким образом, функция jQuery происходит более одного раза. Это должно произойти только один раз для каждого клика. Есть идеи?

Answer 1

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

Edit:

Другой вариант заключается в изменении блока скрипта использовать .bind

<script> 
    jQuery("a#add_device").bind('click', function() 
    { 
     jQuery("table#devices tr:last").after("<tr><td>Test</td><td>Test</td></tr>"); 
    }); 
</script> 

, а затем переместить его в нижней части файла он находится, ниже

<a id="add_device" href="#">Click here to add a device</a> 

Answer 2

Я бы предположил, что это связано с тем, что каждый раз, когда вы это делаете, вы снова запускаете эту строку кода:

jQuery("a#add_device").live('click', function() 

, который добавляет новую копию обработчика событий. Таким образом, вы получаете несколько копий обработчика событий, каждый из которых выполняется.

Чтобы решить эту проблему, вы можете перенести этот код на свой основной JS, чтобы он не был частью извлеченного html, или вы можете оставить его в извлеченном HTML и защитить его переменной, которая отслеживает, был запущен или нет.

Кроме того, этот селектор "#add_device" является более эффективным, чем "a#add_device" и даст вам тот же результат до тех пор, пока вы не пытаетесь избежать #add_device на чем-то другим, кроме <a> тега. В общем, нет причин помещать тип тега перед идентификатором. Идентификаторы уникальны на странице. Если вы используете только ID, то jQuery может оптимизировать поиск с помощью document.getElementById(). Если вы поместите тип тега перед ним, он не сможет оптимизировать столько.