单击时清除 jQuery 表单字段

Question

我创建了一个表单，其中包含一个用于街道地址的对话框搜索框和一个用于邮政地址的对话框搜索框。它的工作原理是，当您单击搜索结果时，它会根据您单击的按钮填充街道或邮政地址。一切正常，除了当您单击搜索结果时，它会清除其他地址的字段填充。据我所知，这一切都与点击功能有关。任何帮助将不胜感激，谢谢

例如： 如果我单击“邮政地址”按钮并单击搜索结果，它将填充邮政地址字段。然后，如果我单击“街道地址”按钮，它将填充“街道地址”字段，但也会清除“邮政地址”字段。

代码

<!-- 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>

如果您需要，我可以发布更多代码，但我已将其范围缩小到他的点击函数，在此脚本中导致了问题。

谢谢

Answer 1

您将两个事件处理程序（两个 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
  }
}

Answer 2

意识到两个处理程序都是通过单击行来触发的。

如果问题是加载一个地址会清除其他行中设置的地址，则问题在于您的 jquery 选择器正在选择每个字段，而不仅仅是正确的字段。您可以使用此变量将选择器限制为触发单击事件的行：

<!-- 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>

Answer 3

对于“邮政地址”和“街道地址”按钮，我认为这两个事件处理程序都会被调用，主要是您像这样设置两个处理程序：

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

所以您需要有比这更具体的选择器。

Answer 4

谢谢大家，我最终用

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

欢呼解决了这个问题