Очистка полей формы jQuery при клике - PullRequest
Новая
       8

Очистка полей формы jQuery при клике

1 голос
/ 23 августа 2011

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

Например: Если я нажму кнопку Почтовый адрес и нажму на результат поиска, он заполнит поля почтового адреса. Затем, если я нажму кнопку Уличный адрес, она заполнит поля Уличный адрес, но также очистит поля Почтовый адрес.

Код 

<!-- STREET ADDRESS -->
<script type="text/javascript">
  $(document).ready(function() {
    $('#table-data tr').click(function () {
      var curRowClass = $(this).attr("class");
      $('#street_name').val( $('.' + curRowClass + ' td.address_street').text() );
      $('#suburb').val( $('.' + curRowClass + ' td.address_suburb').text() );
      $('#city').val( $('.' + curRowClass + ' td.address_city').text() );
      $("#modal_form").dialog('close');
    });
  });
</script>

<!-- POSTAL ADDRESS -->
<script type="text/javascript">
  $(document).ready(function() {
    $('#table-data tr').click(function () {
      var curRowClass = $(this).attr("class");
      $('#street_name_classy').val( $('.' + curRowClass + ' td.address_street_classy').text() );
      $('#suburb_classy').val( $('.' + curRowClass + ' td.address_suburb_classy').text() );
      $('#city_classy').val( $('.' + curRowClass + ' td.address_city_classy').text() );
      $("#modal_form").dialog('close');
    });
  });
</script>

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

Спасибо

Ответы [ 4 ]

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

Поймите, что оба обработчика запускаются щелчком строки.

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

<!-- STREET ADDRESS -->
<script type="text/javascript">
  $(document).ready(function() {
    $('#table-data tr').click(function () {
      var $row = $(this);

      $('#street_name').val( $row.find('td.address_street').text() );
      $('#suburb').val( $row.find('td.address_suburb').text() );
      $('#city').val( $row.find('td.address_city').text() );
      $("#modal_form").dialog('close');
    });
  });
</script>

Если проблема в том, что установка адреса улицы очищает почтовый адрес, проблема в том, что ваш обработчик кликов находится в строке, а не на кнопке. Вы не опубликовали свой HTML, но общая идея такова: 

<!-- STREET ADDRESS -->
<script type="text/javascript">
  $(document).ready(function() {
    $('#table-data tr .street-button').click(function () {
      var $row = $(this).parents('tr').first();

      $('#street_name').val( $row.find('td.address_street').text() );
      $('#suburb').val( $row.find('td.address_suburb').text() );
      $('#city').val( $row.find('td.address_city').text() );
      $("#modal_form").dialog('close');
    });
  });
</script>
2 голосов
/ 23 августа 2011

Вы подключаете два обработчика событий (два обработчика click) к одному и тому же селектору (#table-data tr).Поэтому, когда вы нажимаете кнопку (выглядит как одна и та же кнопка), она запускает оба обработчика щелчков.

Я не уверен, как вы получаете ваши данные, но вы должны рассмотреть возможность использования двух разных обработчикови какой-то флаг, чтобы определить, какая ветвь уволена. 

$('#table-data tr').click(function () {
  if(do_street_address_work) {
    //your logic for populating the street address
  } else {
    //your logic for populating the postal address
  }
}
1 голос
/ 23 августа 2011

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

 $('#table-data tr').click(function ()

Так что вам нужно иметь более конкретный селектор, чем этот.

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

Спасибо, ребята, я решил решить эту проблему, используя 

$('#table-data tr').live('click',function ()

ура

...