Как получить результаты реального селектора в привязке jQuery? - PullRequest
Новая
       3

Как получить результаты реального селектора в привязке jQuery?

2 голосов
/ 01 ноября 2011

Я работаю над небольшим количеством кода для проекта на работе, и я немного озадачен нюансом jQuery.В следующем коде он должен просмотреть мой список и повторить каждый элемент ввода текста с тем же общим именем, что и последний, но с одним номером выше в имени.Вместо этого он выполняет итерацию имени каждого элемента ввода текста с номером, превышающим последнее число, существовавшее при создании ссылки.Итак, это должно выглядеть как более сложная версия этого: 

<input name="industry1" /> <a href="#" class="addField"></a> <!-- Clicked twice -->
<input name="industry2" /> <a href="#" class="addField"></a>
<input name="industry3" /> <a href="#" class="addField"></a>

... И вместо этого это выглядит так: 

<input name="industry1" /> <a href="#" class="addField"></a> <!-- Clicked twice -->
<input name="industry2" /> <a href="#" class="addField"></a>
<input name="industry2" /> <a href="#" class="addField"></a>

Я думаю, проблема в том, чтоСтрока, которая выбирает значение для повторения, устанавливается, когда .live привязывается к новой ссылке добавления.Таким образом, если ссылка по первому полю создает кнопку по второму полю, а кнопка по третьему полю, она действует так, как если бы было только одно поле, потому что именно так было, когда .live связывал функцию с «щелчком мыши»." событие.Есть ли способ заставить селектор выяснить, что такое реальный $ ("form.wizard ul li.industry: last input [type = text]") в состоянии DOM при нажатии на элемент, а не когдаэто связано с элементом? 

  <script type="text/javascript">
   $(function() {
    $("a.addField").live("click", function(event) {
     $(this).parents("li").clone().appendTo($("form.wizard > ul"))
     .children("input[type=text]").val("").attr("name", function() {
      return "industry" + (parseFloat($("form.wizard ul li.industry:last input[type=text]").attr("name").replace("industry", "")) + 1);
     })
     .after(function() {
       if($(this).siblings(".removeField").length == 0) {
        return "<a href='#' class='removeField'>Remove</a>"
       }
     })
     .siblings("label").text("");
     event.preventDefault();
    });
    $("a.removeField").live("click", function(event) {
     $(this).parents("li").remove();
     event.preventDefault();
    });
   });
  </script>


 <form action="#" method="post" class="wizard">
  <ul>
   <li>
    <label>Your company name</label>
    <input type="text" />
    <div class="clear"></div>
   </li>
   <li class="industry">
    <label>Your Industry</label>
    <input type="text" name="industry1" />
    <a href="#" class="addField left">Add</a>
    <div class="clear"></div>
   </li>
  </ul>
 </form>

Ответы [ 2 ]

1 голос
/ 01 ноября 2011

Вы взяли элемент LI с "industry1" и добавили его копию - теперь у вас есть два элемента LI с "industry1". Затем вы взяли номер последнего («1»), увеличили его (до «2») и установили последний LI на «industry2».

Затем вы снова щелкаете по первой LI. Он делает копию этого и добавляет его - теперь у вас есть {LI name = 'industry1' /} {LI name = 'industry2' /} {LI name = 'industry1' /}. Затем вы берете номер последнего («1»), увеличиваете его (до «2») и устанавливаете последний LI равным «industry2», в результате чего вы получаете неожиданный окончательный результат.

1 голос
/ 01 ноября 2011

После перестановки частей сценария теперь, похоже, он работает.

Основная проблема, которую я обнаружил, заключалась в том, что поля были добавлены и сразу выбраны с помощью $("form.wizard ul li.industry:last input[type=text]").Вот почему число всегда было нажатым элементом + 1.

...