点击时清除jQuery表单字段

时间:2011-08-23 01:01:21

标签: jquery forms click

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

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

代码

<!-- 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 个答案:

答案 0 :(得分:2)

您正在将两个事件处理程序(两个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 :(得分:2)

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

如果问题是加载一个地址会清除其他行中设置的地址,则问题是您的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 :(得分:1)

对于邮政地址和街道地址按钮,我认为两个事件处理程序都会被调用,主要是你设置这两个处理程序:

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

所以你需要有更多特定的选择器。

答案 3 :(得分:0)

谢谢大家,我最终用

解决了这个问题
$('#table-data tr').live('click',function ()

欢呼声