Question

我有一个功能，当点击按钮时会打开一个新窗口。当我第一次点击时，没有任何反应，但是当我第二次点击时，窗口会打开。我的代码：

脚本

  <script src="<c:url value="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" />">     </script>
<script type="text/javascript">
  $(document).on('click','#add',function(){
    $( ".editField").click(function() {
      var clickedValue = $(this).find('td:first').text();
      window.open('/somePage' + clickedValue, 'New window');
      return false;
    });
  });
</script>

HTML正文

<table>
<tr><td>th text</td></tr>
<tr class="editField">
    <td>data</td>
    <td>data1</td>
    <td colspan="2">
            <input id = "add" type="submit" value="Add" />
    </td>
  </tr>
</table>

Answer 1

您当前的代码有两个事件监听器，一个用于$(document).click，另一个用于.editField。

问题是，您已将它们放在另一个中，因此在单击文档之前不会添加.editField侦听器，因此需要两次单击。

$(document).on('click','#add',function(){ // << first click
  $( ".editField").click(function() {     // << event listener added, second click
    /*...*/
  });
});

你只需要一个听众：

$( ".editField").click(function() {
  var clickedValue = $(this).find('td:first').text();
  window.open('/somePage' + clickedValue, 'New window');
  return false;
});

Answer 2

实际上，通过点击您已绑定的按钮，单击tr.editfield，但不打开窗口。因此，如果您再点击tr（任何地方，包括按钮） - 您将打开新窗口如果您只想在按钮上单击打开新窗口，请使用以下代码：

＆＃13;

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$("#add").click(function() {
	var clickedValue = $(this).parents('.editField');
	clickedValue = $('td:first', clickedValue).text();
	window.open('/somePage' + clickedValue, 'New window');
	return false;
});
</script>

＆＃13;

Answer 3

最终解决：

<script type="text/javascript">
  $(document).ready(function() {
    $( ".editField #add").click(function() {
      var clickedValue = $(this).parents('.editField');
      clickedValue = $('td:first', clickedValue).text();
      window.open('/somePage' + clickedValue, 'New window');
      return false;
    });
  });
</script>

如何一键打开新窗口？

3 个答案: