jQuery clone () проблема при использовании с методом attr () - PullRequest
Новая
       8

jQuery clone () проблема при использовании с методом attr ()

1 голос
/ 29 марта 2011

Я использую метод jQuery clone () для клонирования строки таблицы, затем использую метод attr () для изменения имени / идентификатора некоторых полей.Все это работает хорошо, и если я использую «просмотр сгенерированного источника», имена / идентификаторы устанавливаются правильно, однако, когда сгенерированный контент вызывает событие JavaScript, он запускает его, как если бы это был родительский элемент.Например, у меня есть элемент с именем / идентификатором 'slast1', который должен запускать метод автозаполнения (основанный на том факте, что он является частью класса 'slast') и который работает нормально.К сожалению, когда я щелкаю по тому же элементу в сгенерированной строке (в данном случае id / name элемента - «slast2»), он запускает метод автозаполнения, но действует так, как если бы он был запущен из родительского элемента, «slast1».Кажется, я не могу найти способ обойти это и думаю, что это может быть ограничением использования метода clone (), но я надеюсь, что мне чего-то не хватает. 

function fnAddRow(iRow)
{
  var iNewRow = iRow+1;
  $("#tblAuthors tr:last").clone(true).insertAfter("#tblAuthors tr:last");
  $("#tblAuthors tr:last #slast"+iRow).attr("name", "slast"+iNewRow);
  $("#tblAuthors tr:last #slast"+iRow).attr("id", "slast"+iNewRow);
  $("#slast"+iNewRow).val("");
}

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

  $(function()
  {
    var aEmps = 
    [
<?php
echo $sEmps;
?>    
    ];

    $(".slast").bind( "keydown", function( event ) {
      if ( event.keyCode === $.ui.keyCode.TAB &&
          $( this ).data( "autocomplete" ).menu.active ) 
          { event.preventDefault();}
    })
    .autocomplete({
      source: aEmps,
      close: function(event, ui)
      {
        // Split return value and store in array
        var aName = this.value.split(", ");
        // Get row #
        var iRow = this.name[this.name.length-1];
        // Populate values        
        $("#slast"+iRow).val(aName[0]);
        $("#sfirst"+iRow).val(aName[1]);
        $("#smi"+iRow).val(aName[2]);
      }
    });
  });

Как видно из автозаполненияметод должен запускаться чем-либо с классом «slast», но по причинам, по которым я не могу понять, $ (this) всегда = родитель («slast1»), а не «slast2» или любой другой сгенерированный контент.

Ответы [ 3 ]

2 голосов
/ 29 марта 2011

Используйте live вместо bind, это должно решить проблему для вас.

1 голос
/ 29 марта 2011

Когда вы используете .clone(true), вы копируете все data() и все события, связанные с этим элементом.Что вызывает ваши проблемы.

Если вы переключите привязку вашего события на использование .delegate() (или .live()), вы сможете решить проблему инициируемого события. 

var autoCompleteOptions = {
  source: aEmps,
  close: function(event, ui)
  {
    // Split return value and store in array
    var aName = this.value.split(", ");
    // Get row #
    var iRow = this.name[this.name.length-1];
    // Populate values        
    $("#slast"+iRow).val(aName[0]);
    $("#sfirst"+iRow).val(aName[1]);
    $("#smi"+iRow).val(aName[2]);
  }
};

$("#tblAuthors").delegate("tr .slast", "keydown", function(event){
    if ( event.keyCode === $.ui.keyCode.TAB && 
          $( this ).data( "autocomplete" ).menu.active ) { 
     event.preventDefault();
   }
}).autocomplete(autoCompleteOptions);


function fnAddRow(iRow)
{
  //....stuff.....
  $("#tblAuthors tr:last #slast"+iRow).autocomplete(autoCompleteOptions);
  //....stuff.....
}

Используя делегата, вы привязываете событие к $("#tblAuthors"), а не к .slast напрямую.

Также на примечании , использование delegeate может вас получитьнемного производительности, а также в отношении этого ответа .

ОБНОВЛЕНИЕ: Марк и я много раз возвращались к решению этой проблемы, вот окончательный код: http://jsfiddle.net/niczak/HjCMh/1/

0 голосов
/ 29 марта 2011

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

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

...